/* ==========================================================================
   cq_admin 布局骨架（侧栏 / 顶栏 / 内容区）
   依赖：cq-tokens.css（提供变量），须在其后加载
   层级：顶栏 1020 < 抽屉遮罩 1030 < 侧栏 1035 < BS5 弹窗 1050/1055
   ========================================================================== */

/* ---------- 跳转到主内容（无障碍） ---------- */
.cq-skip-link{
  position:absolute; left:-9999px; top:0; z-index:var(--cq-z-skip);
  background:var(--cq-primary); color:#fff;
  padding:8px 16px; border-radius:0 0 var(--cq-radius-ctl) 0;
}
.cq-skip-link:focus{ left:0 }

/* ---------- 侧栏 ---------- */
.cq-sidebar{
  position:fixed; top:0; left:0; bottom:0;
  width:var(--cq-sidebar-w);
  background:var(--cq-surface-2);
  border-right:1px solid var(--cq-border);
  z-index:var(--cq-z-sidebar);
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent;
  transition:width .22s ease;
}
.cq-sidebar::-webkit-scrollbar{width:6px}
.cq-sidebar::-webkit-scrollbar-track{background:transparent}
.cq-sidebar::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px}
.cq-sidebar::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* 品牌区 */
.cq-brand{
  display:flex; align-items:center; gap:9px;
  height:var(--cq-topbar-h); padding:0 20px;
  border-bottom:1px solid var(--cq-border);
  flex:0 0 auto;
}
.cq-brand-mark{
  width:9px; height:9px; border-radius:3px;
  background:var(--cq-primary); flex:0 0 9px;
}
.cq-brand-text{ font-size:15px; font-weight:600; color:#0f172a; letter-spacing:.3px }
.cq-brand-text-dark{ color:#0f172a }

/* 导航 */
.cq-nav{ padding:12px 10px 28px }

.cq-nav-link{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; margin:2px 0;
  border-radius:var(--cq-radius-ctl);
  color:var(--cq-text-soft);
  font-size:13.5px; font-weight:500;
  transition:background .15s, color .15s;
}
.cq-nav-link:hover{ background:#f1f5f9; color:var(--cq-text) }
.cq-nav-link.active{
  background:#eff6ff; color:var(--cq-primary); font-weight:600;
  box-shadow:inset 3px 0 0 var(--cq-primary);
}
.cq-nav-icon{ width:17px; text-align:center; font-size:14px; flex:0 0 17px; color:#94a3b8 }
.cq-nav-link:hover .cq-nav-icon,
.cq-nav-link.active .cq-nav-icon{ color:var(--cq-primary) }
.cq-nav-text{ flex:1 1 auto }
.cq-nav-caret{
  font-size:11px; color:var(--cq-text-mute);
  transition:transform .22s ease;
}
.cq-nav-toggle[aria-expanded="true"] .cq-nav-caret{ transform:rotate(180deg) }
.cq-nav-toggle[aria-expanded="true"]{ color:var(--cq-text) }

/* 子菜单（BS5 collapse） */
.cq-subnav{ padding:2px 0 6px 0 }
.cq-subnav-link{
  display:block;
  padding:7px 12px 7px 39px;
  margin:1px 0;
  border-radius:6px;
  color:var(--cq-text-soft);
  font-size:13px;
  transition:background .15s, color .15s;
}
.cq-subnav-link:hover{ background:#f1f5f9; color:var(--cq-text) }
.cq-subnav-link.active{
  background:#eff6ff; color:var(--cq-primary); font-weight:600;
}

/* ---------- 顶栏 ---------- */
.cq-topbar{
  position:fixed; top:0; right:0;
  height:var(--cq-topbar-h);
  display:flex; align-items:center; gap:14px;
  padding:0 22px;
  background:var(--cq-surface);
  border-bottom:1px solid var(--cq-border);
  box-shadow:0 2px 8px rgba(16,24,40,.06);
  z-index:var(--cq-z-topbar);
  transition:left .22s ease;
}
.cq-topbar-spacer{ flex:1 1 auto }
.cq-topbar-center{ left:0; justify-content:center; gap:10px }

.cq-toggle{
  display:none;
  width:38px; height:38px; flex:0 0 38px;
  align-items:center; justify-content:center;
  border:1px solid var(--cq-border-strong);
  background:#fff; color:var(--cq-text);
  border-radius:var(--cq-radius-ctl);
  cursor:pointer; font-size:16px; line-height:1;
}
.cq-toggle:hover{ border-color:var(--cq-primary); color:var(--cq-primary) }

/* 桌面端侧栏折叠按钮 */
.cq-collapse-toggle{
  display:none;
  width:34px; height:34px; flex:0 0 34px;
  align-items:center; justify-content:center;
  border:1px solid transparent;
  background:transparent; color:var(--cq-text-soft);
  border-radius:var(--cq-radius-ctl);
  cursor:pointer; font-size:15px; line-height:1;
  transition:background .15s, color .15s, border-color .15s;
}
.cq-collapse-toggle:hover{ background:#f1f5f9; color:var(--cq-primary); border-color:var(--cq-border) }

.cq-user{ display:flex; align-items:center; gap:8px; color:var(--cq-text-soft); font-size:13px }
.cq-avatar{
  width:32px; height:32px; border-radius:50%;
  background:var(--cq-primary-soft); color:var(--cq-primary);
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.cq-logout{
  display:inline-flex; align-items:center; gap:6px;
  height:34px; padding:0 14px;
  border:1px solid var(--cq-border-strong);
  border-radius:var(--cq-radius-ctl);
  background:#fff; color:var(--cq-text-soft); font-size:13px;
}
.cq-logout:hover{ border-color:#fecaca; background:#fef2f2; color:#dc2626 }

/* ---------- 内容区 ---------- */
.cq-main{
  padding:var(--cq-topbar-h) 22px 40px;
  transition:margin-left .22s ease;
}

/* 访客态（未登录：登录/注册/找回密码/OAuth）：无侧栏，顶栏与主区必须占满整宽，
   否则桌面端会空出 240px 左侧空白（顶部左侧"缺一块"）。 */
body.cq-guest .cq-topbar{ left:0 }
body.cq-guest .cq-main{ margin-left:0 }

@media (min-width:992px){
  /* 侧栏留白仅在登录态（body.cq-shell）生效。
     访客页（body.cq-guest）无侧栏，若沿用会顶出 240px 空白 —— 见下方 .cq-guest 归零规则。 */
  body.cq-shell .cq-topbar{ left:var(--cq-sidebar-w) }
  body.cq-shell .cq-main{ margin-left:var(--cq-sidebar-w) }

  .cq-collapse-toggle{ display:inline-flex }

  /* 侧栏折叠态（仅桌面端生效，避免与窄屏抽屉冲突） */
  body.cq-sidebar-collapsed .cq-sidebar{
    width:var(--cq-sidebar-collapsed-w);
  }
  body.cq-sidebar-collapsed .cq-topbar{
    left:var(--cq-sidebar-collapsed-w);
  }
  body.cq-sidebar-collapsed .cq-main{
    margin-left:var(--cq-sidebar-collapsed-w);
  }
  body.cq-sidebar-collapsed .cq-brand{
    justify-content:center;
    padding:0 10px;
  }
  body.cq-sidebar-collapsed .cq-brand-text,
  body.cq-sidebar-collapsed .cq-nav-text,
  body.cq-sidebar-collapsed .cq-nav-caret,
  body.cq-sidebar-collapsed .cq-subnav{
    display:none !important;
  }
  body.cq-sidebar-collapsed .cq-nav{ padding:12px 8px 28px }
  body.cq-sidebar-collapsed .cq-nav-link{
    justify-content:center;
    padding:10px 0;
  }
  body.cq-sidebar-collapsed .cq-nav-icon{
    flex:0 0 auto;
    font-size:15px;
  }
  body.cq-sidebar-collapsed .cq-nav-toggle{
    pointer-events:none;
  }
}

/* ---------- 窄屏：侧栏转抽屉 ---------- */
.cq-backdrop{
  display:none;
}
@media (max-width:991px){
  .cq-sidebar{
    transform:translateX(-100%);
    transition:transform .25s ease;
    box-shadow:var(--cq-shadow-lg);
  }
  body.cq-sidebar-open .cq-sidebar{ transform:translateX(0) }
  .cq-toggle{ display:flex }
  .cq-topbar{ left:0 }
  .cq-main{ padding-left:16px; padding-right:16px }
  .cq-backdrop{
    display:block;
    position:fixed; inset:0;
    background:rgba(15,23,42,.45);
    z-index:var(--cq-z-backdrop);
    opacity:0; visibility:hidden;
    transition:opacity .25s;
  }
  body.cq-sidebar-open .cq-backdrop{ opacity:1; visibility:visible }

  /* 侧栏打开时，把主内容区整体压到侧栏/遮罩下方，防止工具栏按钮浮出来 */
  body.cq-sidebar-open .cq-main{
    position:relative;
    z-index:0;
  }
}

@media (max-width:767px){
  .cq-main{ padding:calc(var(--cq-topbar-h) + 14px) 14px 32px }
  .cq-user-name, .cq-logout span{ display:none }
  .cq-logout{ padding:0 10px }
}

/* ---------- 小手机（<576px）：顶栏与主区进一步收紧 ---------- */
@media (max-width:575px){
  .cq-topbar{ padding:0 12px; gap:10px }
  .cq-main{ padding:calc(var(--cq-topbar-h) + 10px) 12px 28px }
  .cq-collapse-toggle, .cq-toggle{ width:34px; height:34px; flex:0 0 34px }
  .cq-logout{ padding:0 9px }
}