/* AdminLayout：侧栏 + 顶栏 + 页头 + 主体。 */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--t) var(--ease);
}
.app.collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* ══ 侧栏 ══════════════════════════════════════════════════════ */

.sidebar {
  grid-column: 1;
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--line);
  transition: width var(--t) var(--ease);
}
.app.collapsed .sidebar { width: var(--sidebar-w-collapsed); }

/* 品牌区 */
.brand {
  height: var(--topbar-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.brand-mark {
  width: 32px; height: 32px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: var(--accent-soft);
  color: var(--accent);
}
.brand-text { min-width: 0; }
.brand-name { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; }
.brand-sub { font-size: var(--fs-xs); color: var(--fg-3); white-space: nowrap; }

/* 彩种选择器：全局作用域，决定所有按彩种划分的页面看哪一个 */
.game-switch { flex: none; padding: var(--sp-3) var(--sp-3) var(--sp-2); }
.game-switch label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--sp-1);
  padding-left: 2px;
}

.nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-2) var(--sp-3) var(--sp-4);
}
.nav-group + .nav-group { margin-top: var(--sp-4); }
.nav-group-title {
  padding: 0 var(--sp-2) var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  height: 40px;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r);
  background: none;
  color: var(--fg-2);
  font-size: var(--fs-md);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-item + .nav-item { margin-top: 2px; }
.nav-item:hover { background: var(--bg-hover); color: var(--fg); }
.nav-item[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}
.nav-item .icon { flex: none; }
.nav-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 收起后只剩图标。文字用 opacity 而不是 display:none —— 后者会让
 * 收起动画变成"文字瞬间消失再收宽度"，很跳。 */
.app.collapsed .nav-label,
.app.collapsed .brand-text,
.app.collapsed .nav-group-title,
.app.collapsed .game-switch,
.app.collapsed .nav-badge { opacity: 0; pointer-events: none; }
.app.collapsed .nav-label,
.app.collapsed .brand-text { width: 0; }
.app.collapsed .nav-group-title { height: 0; overflow: hidden; padding: 0; }
.app.collapsed .nav-item { justify-content: center; padding: 0; }
.nav-label, .brand-text, .nav-group-title {
  transition: opacity var(--t-fast) var(--ease);
}

.nav-badge {
  flex: none;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--bg-hover);
  color: var(--fg-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.nav-badge.alarm { background: var(--err-soft); color: var(--err); }

.sidebar-foot {
  flex: none;
  padding: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--fg-3);
}
.app.collapsed .sidebar-foot { text-align: center; }
.app.collapsed .sidebar-foot .foot-text { display: none; }

/* ══ 主区 ══════════════════════════════════════════════════════ */

.main {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;   /* 少了这行，宽表格会把整个网格撑开 */
}

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--topbar-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--page-pad);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.topbar-title {
  font-size: var(--fs-md);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page {
  flex: 1 1 auto;
  padding: var(--sp-6) var(--page-pad) var(--sp-10);
  min-width: 0;
}

/* 页头 */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.page-head h1 { font-size: var(--fs-2xl); }
.page-desc { color: var(--fg-2); font-size: var(--fs-md); margin-top: var(--sp-1); }
.page-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.crumbs {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--fg-3);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}
.crumbs .sep { color: var(--fg-disabled); }
.crumbs button {
  border: 0; background: none; padding: 0;
  color: var(--fg-3); cursor: pointer; font-size: inherit;
}
.crumbs button:hover { color: var(--fg-2); text-decoration: underline; }
.crumbs .cur { color: var(--fg-2); }

/* 统计卡片网格：桌面 4 列、平板 2 列、手机 1 列 */
.stats {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--sp-6);
}
@media (max-width: 1200px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .stats { grid-template-columns: minmax(0, 1fr); } }

.grid-2 {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* ══ 移动端 ════════════════════════════════════════════════════ */

.nav-toggle { display: none; }

@media (max-width: 1024px) {
  .app, .app.collapsed { grid-template-columns: minmax(0, 1fr); }
  .main { grid-column: 1; }

  /* 侧栏变抽屉 */
  .sidebar {
    width: min(var(--sidebar-w), 84vw);
    transform: translateX(-100%);
    transition: transform var(--t) var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .app.drawer-open .sidebar { transform: none; }
  /* 抽屉打开时按收起态渲染是错的，强制展开 */
  .app.collapsed .sidebar { width: min(var(--sidebar-w), 84vw); }
  .app.collapsed .nav-label,
  .app.collapsed .brand-text,
  .app.collapsed .nav-group-title,
  .app.collapsed .game-switch,
  .app.collapsed .nav-badge { opacity: 1; pointer-events: auto; width: auto; height: auto; padding: revert; overflow: visible; }
  .app.collapsed .nav-item { justify-content: flex-start; padding: 0 var(--sp-3); }

  .nav-toggle { display: inline-flex; }
  .sidebar-backdrop {
    position: fixed; inset: 0;
    z-index: calc(var(--z-sidebar) - 1);
    background: rgba(0, 0, 0, .6);
    animation: fade-in var(--t-fast) var(--ease);
  }
}

@media (max-width: 640px) {
  .page-head { flex-direction: column; align-items: stretch; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1 1 auto; justify-content: center; }
  .page-head h1 { font-size: var(--fs-xl); }
  /* 顶栏上只留必要的，搜索移进页面里 */
  .topbar .desktop-only { display: none; }
}

/* ── 按彩种划分的子菜单 ──────────────────────────────────────────
 *
 * 彩种会一直加，所以"开奖记录"这类页面展开成父子结构：
 * 点子条目直达那个彩种，而不用先去别处换彩种再点进来。
 */

.nav-chevron {
  margin-left: auto;
  flex: none;
  opacity: .5;
  transition: transform var(--t-fast) var(--ease);
}
.nav-item:hover .nav-chevron { opacity: 1; }

/* 父条目处于当前页时高亮，但比子条目弱 —— 真正"在这一页"的是子条目 */
.nav-item.is-parent-active { color: var(--fg); }
.nav-item.is-parent-active .icon { color: var(--accent); }

.nav-children {
  /* 竖线对齐父条目的图标中心：12px 内边距 + 10px 到图标中心 */
  margin: 2px 0 2px 22px;
  padding-left: var(--sp-3);
  border-left: 1px solid var(--line);
}
.nav-item.nav-child {
  height: 34px;
  font-size: var(--fs-base);
  color: var(--fg-2);
}
.nav-item.nav-child[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}
.nav-empty {
  padding: 6px var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--fg-3);
}

/* 侧栏收起时只剩图标，子菜单没有图标可显示 —— 整个藏掉。
 * 留着的话会是一列无法辨认的短横线。 */
.app.collapsed .nav-children,
.app.collapsed .nav-chevron { display: none; }
@media (max-width: 1024px) {
  /* 抽屉里是展开态，子菜单要显示 */
  .app.collapsed .nav-children { display: block; }
  .app.collapsed .nav-chevron { display: block; }
}