/* =============================================================================
   adminweb 外框样式 —— 登录页 + 侧边导航 + 顶栏（仅 index.html 使用）
   依赖 static/admin.css 的设计令牌
   ============================================================================= */

/* ------------------------------------------------------------------ 登录页 */
.login { position: fixed; inset: 0; display: none; background: var(--bg); }

.login-side {
  width: 44%; min-width: 320px;
  background: var(--nav-bg);
  background-image: radial-gradient(circle at 22% 18%, rgba(22,119,255,.34), transparent 55%);
  padding: 48px; display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.login-side::after {
  content: ""; position: absolute; right: -70px; bottom: -70px;
  width: 260px; height: 260px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
}
.login-side .logo {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.login-side .logo svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
.login-side h1 { color: #fff; font-size: 22px; font-weight: 650; letter-spacing: .5px; }
.login-side .slogan { color: rgba(255,255,255,.55); font-size: 13px; margin-top: 8px; }
.login-side .feats { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.login-side .feat { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.78); font-size: 13px; }
.login-side .feat i {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 5px;
  background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center;
}
.login-side .feat i svg { width: 11px; height: 11px; stroke: var(--brand-hover); fill: none; stroke-width: 2.4; }

.login-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 340px; max-width: 100%; }
.login-card h2 { font-size: 20px; font-weight: 650; }
.login-card .desc { font-size: var(--fs-sm); color: var(--text-3); margin: 4px 0 24px; }
.login-card .field input { height: 38px; }
.login-err {
  min-height: 20px; font-size: var(--fs-sm); color: var(--danger); margin: -4px 0 10px;
}
.btn.block { width: 100%; height: 38px; font-size: var(--fs); }
.login-foot {
  text-align: center; font-size: var(--fs-xs); color: var(--text-3); margin-top: 20px;
}
/* ICP 备案：整页底部居中一行。绝对定位相对 .login（fixed inset:0），
   不受 login-card 宽度限制；z-index 抬高，避免被左侧装饰圆压住。
   文字居中于整页 50%，实际落在右侧浅色区内，与深色左栏不重叠。 */
.login-beian {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 10px 24px 14px; text-align: center;
  font-size: var(--fs-xs); line-height: 1.5;
}
.login-beian a {
  color: var(--text-3); text-decoration: none;
  transition: color .15s;
}
.login-beian a:hover { color: var(--brand); text-decoration: underline; }

/* ------------------------------------------------------------------ 主框架 */
.layout { display: none; height: 100vh; }

/* 侧边导航 */
.nav-side {
  width: 216px; flex-shrink: 0; background: var(--nav-bg);
  display: flex; flex-direction: column; height: 100vh;
}
.nav-brand {
  height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 0 16px; border-bottom: 1px solid var(--nav-line);
}
.nav-brand .logo {
  width: 28px; height: 28px; border-radius: 8px; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nav-brand .logo svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.nav-brand .name { color: #fff; font-size: 14px; font-weight: 650; letter-spacing: .3px; }
.nav-brand .name span { display: block; font-size: 10.5px; font-weight: 400; color: rgba(255,255,255,.45); letter-spacing: .5px; }

.nav-menu { flex: 1; overflow-y: auto; padding: 8px 8px 12px; }
.nav-menu::-webkit-scrollbar { width: 0; }
.nav-group {
  font-size: 10.5px; letter-spacing: 1.2px; color: #6b7a8f;
  padding: 14px 10px 6px; text-transform: uppercase;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 10px; margin-bottom: 2px;
  border-radius: var(--radius-sm);
  color: var(--nav-fg); font-size: 13px; cursor: pointer;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255,255,255,.07); color: var(--nav-fg-hover); }
.nav-item.active { background: var(--nav-active-bg); color: var(--nav-active-fg); font-weight: 500; }
.nav-item svg {
  width: 16px; height: 16px; flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.nav-item .badge {
  margin-left: auto; min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 9px; background: var(--danger); color: #fff;
  font-size: 10.5px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}

/* 可展开的父级菜单（如「赛事管理」下挂状态图与大屏设置） */
.nav-parent { position: relative; }
.nav-caret {
  width: 22px; height: 22px; margin-left: auto; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; opacity: .5;
  transition: transform .2s, opacity .15s, background .15s;
}
.nav-caret:hover { opacity: 1; background: rgba(255, 255, 255, .13); }
.nav-caret svg { width: 11px; height: 11px; stroke-width: 2.6; }
.nav-parent.open > .nav-item .nav-caret { transform: rotate(90deg); }
/* 子项：缩进 + 引导线 + 小圆点，一眼看出隶属关系而不是并列 */
.nav-sub { position: relative; overflow: hidden; max-height: 0; transition: max-height .24s ease; }
.nav-parent.open .nav-sub { max-height: 200px; }
/* 引导线对准父级图标的中心（padding 10 + 图标半宽 8 ≈ 19） */
.nav-sub::before { content: ''; position: absolute; left: 19px; top: 3px; bottom: 3px; width: 1px; background: rgba(255, 255, 255, .13); }
.nav-item.sub { position: relative; height: 34px; padding-left: 30px; font-size: 12.5px; opacity: .85; }
/* 圆点脱离 flex 流压在引导线上，文案才能稳定落在 30px 处 */
.nav-item.sub .dot {
  position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55;
}
.nav-item.sub:hover { opacity: 1; }
.nav-item.sub.active { opacity: 1; }
.nav-item.sub.active .dot { opacity: 1; background: var(--brand); }
/* 子项被选中时，父级保持「当前分组」高亮，但不抢 active 的主色 */
.nav-item.in-path { color: var(--nav-fg-hover); background: rgba(255, 255, 255, .05); }

.nav-foot { flex-shrink: 0; border-top: 1px solid var(--nav-line); padding: 8px; }
.nav-user {
  display: flex; align-items: center; gap: 9px; padding: 6px 8px;
  border-radius: var(--radius-sm);
}
.nav-user .avatar {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.nav-user .info { min-width: 0; line-height: 1.35; }
.nav-user .info b { display: block; color: #fff; font-size: 12.5px; font-weight: 600; }
.nav-user .info span { font-size: 11px; color: rgba(255,255,255,.45); }
.nav-user .out {
  margin-left: auto; width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); color: rgba(255,255,255,.55); cursor: pointer;
}
.nav-user .out:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-user .out svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8;
                     stroke-linecap: round; stroke-linejoin: round; }

/* 右侧主区 */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; }

.topbar {
  height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.topbar .crumb { font-size: var(--fs-sm); color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.topbar .crumb b { color: var(--text); font-size: 14px; font-weight: 600; }
.topbar .right { display: flex; align-items: center; gap: 10px; }
.topbar .who { font-size: var(--fs-sm); color: var(--text-2); }

.frame-wrap { flex: 1; min-height: 0; background: var(--bg); }
.frame-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 900px) {
  .login-side { display: none; }
  .nav-side { width: 60px; }
  .nav-brand .name, .nav-group, .nav-item span, .nav-user .info { display: none; }
  .nav-item { justify-content: center; }
  /* 窄栏下只剩图标，子菜单没有可辨识的图形 → 整块收起来，避免出现几个无意义的小圆点 */
  .nav-caret, .nav-sub { display: none; }
}