/* ============================================================
   layout.css · 布局:侧边栏 + 顶栏 + 内容区 + 登录页
   ============================================================ */

.app-body { height:100vh; height:100dvh; overflow:hidden; overscroll-behavior:none; }
.layout { display:flex; height:100vh; height:100dvh; min-height:0; overflow:hidden; overscroll-behavior:none; }
.mobile-nav-toggle, .mobile-nav-backdrop { display:none; }

/* 侧边栏 */
.sidebar {
  width: 244px; flex-shrink: 0;
  background: #0f1a2a;
  border-right: 1px solid #15243a;
  padding: 0 12px 18px;
  display: flex; flex-direction: column; gap: 0;
  position: relative; height: 100vh; height:100dvh; overflow: hidden;
}
.side-brand { position:relative; z-index:2; display:flex; flex:0 0 auto; align-items:center; gap:10px; margin-bottom:1px; padding:26px 11px 18px; border-bottom:1px solid rgba(158,177,202,.2); background:#0f1a2a; font-weight:700; font-size:15px; color:#fff; }
.sidebar-menu { display:flex; flex:1 1 auto; min-height:0; flex-direction:column; gap:3px; padding:0 0 18px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.side-brand-mark { display:grid; grid-template-columns:repeat(2,5px); grid-template-rows:repeat(2,5px); gap:2px; width:12px; height:12px; }
.side-brand-mark i { width:5px; height:5px; background:#fff; display:block; }
.side-brand-mark i:nth-child(2) { opacity:.58; } .side-brand-mark i:nth-child(3) { opacity:.3; }
.sidebar-collapse-toggle { position:relative; display:grid; flex:0 0 auto; width:40px; height:40px; margin-left:auto; padding:0; border:0; border-radius:6px; place-items:center; background:transparent; color:#9eb1ca; cursor:pointer; transition-property:background-color,color,transform; transition-duration:var(--dur-fast); transition-timing-function:var(--ease-out); }
.sidebar-collapse-toggle:hover { background:#172943; color:#fff; }.sidebar-collapse-toggle:focus-visible { outline:2px solid #91caff; outline-offset:2px; }.sidebar-collapse-toggle:active { transform:scale(.96); }
.sidebar-toggle-icon { position:absolute; display:grid; place-items:center; transition-property:opacity,transform,filter; transition-duration:160ms; transition-timing-function:cubic-bezier(.2,0,0,1); }.sidebar-toggle-icon .ui-icon { width:17px; height:17px; }.sidebar-toggle-icon-expand { opacity:0; transform:scale(.25); filter:blur(4px); }
.side-group { font-size:11px; color:#8293ad; padding:17px 11px 7px; letter-spacing:.06em; }
.side-item {
  position: relative;
  display: flex; justify-content: flex-start; align-items: center; gap:8px;
  min-height:40px; padding:9px 11px; border-radius:6px;
  font-size:13px; color:#b7c4d6;
  transition-property: background-color, color, transform;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-out);
}
.side-item:hover { background:#172943; color:#fff; transform:translateX(2px); }
.side-item.active { background:#1677ff; color:#fff; font-weight:600; box-shadow:inset 3px 0 0 #91caff; }
.side-item .ui-icon { width:17px; height:17px; flex:0 0 auto; }
.side-item-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-badge { margin-left:auto; background:#ff4d4f; color:#fff; font-size:11px; border-radius:999px; padding:1px 7px; font-weight:500; line-height:17px; }

@media (min-width: 769px) {
  .sidebar { transition:width 180ms cubic-bezier(.2,0,0,1), padding 180ms cubic-bezier(.2,0,0,1); }
  .layout.sidebar-collapsed .sidebar { width:72px; padding-right:10px; padding-left:10px; }
  .layout.sidebar-collapsed .side-brand { justify-content:center; gap:8px; padding-right:0; padding-left:0; }
  .layout.sidebar-collapsed .side-brand-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .layout.sidebar-collapsed .sidebar-collapse-toggle { margin-left:0; }
  .layout.sidebar-collapsed .sidebar-toggle-icon-collapse { opacity:0; transform:scale(.25); filter:blur(4px); }
  .layout.sidebar-collapsed .sidebar-toggle-icon-expand { opacity:1; transform:scale(1); filter:blur(0); }
  .layout.sidebar-collapsed .side-group { height:14px; padding:10px 0 4px; overflow:hidden; color:transparent; }
  .layout.sidebar-collapsed .side-item { justify-content:center; min-height:42px; padding-right:0; padding-left:0; }
  .layout.sidebar-collapsed .side-item-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .layout.sidebar-collapsed .side-item .side-badge { position:absolute; top:2px; right:2px; min-width:16px; margin:0; padding:0 4px; text-align:center; }
  .layout.sidebar-collapsed .side-item::after { position:absolute; left:calc(100% + 10px); z-index:60; padding:6px 8px; border-radius:5px; background:#172943; color:#fff; content:attr(data-tooltip); font-size:12px; line-height:1.2; white-space:nowrap; opacity:0; pointer-events:none; transform:translateX(-3px); transition-property:opacity,transform; transition-duration:var(--dur-fast); transition-timing-function:var(--ease-out); box-shadow:0 8px 18px rgba(15,26,42,.22); }
  .layout.sidebar-collapsed .side-item:hover::after, .layout.sidebar-collapsed .side-item:focus-visible::after { opacity:1; transform:translateX(0); }
}

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

/* 顶栏(48px) */
.topbar {
  min-height: 56px; background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; padding: 0 28px; gap: 12px;
  position: sticky; top: 0; z-index: 40;
}
.topbar-title { font-size:14px; font-weight:600; color:var(--text-primary); }
.topbar-user { margin-left:auto; display:flex; align-items:center; gap:12px; font-size:13px; color:var(--text-secondary); }
.topbar-notification { position:relative; display:grid; place-items:center; width:40px; height:40px; border-radius:6px; color:var(--text-secondary); }
.topbar-notification:hover { background:var(--bg-hover); color:var(--brand); }
.topbar-notification .ui-icon { width:18px; height:18px; }
.topbar-notification .side-badge { position:absolute; top:1px; right:0; min-width:17px; margin:0; padding:0 4px; text-align:center; }
.role-pill { background:var(--brand-soft); color:var(--brand-hover); font-size:11px; padding:3px 8px; border-radius:999px; }
.topbar-logout { display:flex; align-items:center; gap:5px; color:var(--text-secondary); }
.topbar-logout .ui-icon { width:15px; height:15px; }

/* 内容区 */
.container { flex:1 1 auto; min-height:0; max-width:1540px; margin:0 auto; padding:24px 28px 36px; width:100%; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }

/* 返回按钮 */
.back-btn { margin-bottom: 12px; display: inline-block; }

/* 登录页样式位于 login.css，保持后台布局与认证页面样式解耦。 */

/* 响应式(手机端):保留完整导航为抽屉，不把长菜单挤成横向滚动条。 */
@media (max-width: 768px) {
  .layout { display:block; height:100dvh; }
  .main { height:100dvh; }
  .topbar { min-height:56px; padding:0 12px; gap:8px; }
  .mobile-nav-toggle {
    display:grid; flex:0 0 auto; width:44px; height:44px; padding:0; border:0; border-radius:6px;
    place-items:center; background:transparent; color:var(--text-primary); cursor:pointer;
    transition-property:background-color,color,transform; transition-duration:var(--dur-fast); transition-timing-function:var(--ease-out);
  }
  .mobile-nav-toggle:hover { background:var(--bg-hover); color:var(--brand); }
  .mobile-nav-toggle:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
  .mobile-nav-toggle:active { transform:scale(.96); }
  .mobile-nav-toggle .ui-icon { width:20px; height:20px; }
  .topbar-title { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar-user { gap:4px; }
  .topbar-user-name, .role-pill, .topbar-logout > span { display:none; }
  .topbar-notification, .topbar-logout { width:44px; height:44px; justify-content:center; }
  .topbar-logout { display:grid; place-items:center; border-radius:6px; }
  .topbar-logout:hover { background:var(--bg-hover); color:var(--brand); }
  .topbar-logout .ui-icon { width:18px; height:18px; }
  .sidebar {
    position:fixed; z-index:60; inset:0 auto 0 0; width:min(292px,calc(100vw - 52px)); height:100dvh; max-height:none;
    padding:0 12px; overflow:hidden;
    flex-direction:column; flex-wrap:nowrap; gap:0; border-right:1px solid #15243a; border-bottom:0;
    transform:translateX(-104%); transition:transform 180ms cubic-bezier(.2,0,0,1); will-change:transform;
    box-shadow:16px 0 40px rgba(15,26,42,.18);
  }
  .layout.mobile-nav-open .sidebar { transform:translateX(0); }
  .mobile-nav-backdrop {
    position:fixed; z-index:50; inset:0; display:block; width:100%; height:100%; margin:0; padding:0; border:0;
    background:rgba(10,22,40,.36); opacity:0; pointer-events:none; transition:opacity 180ms ease;
  }
  .layout.mobile-nav-open .mobile-nav-backdrop { opacity:1; pointer-events:auto; }
  .side-brand { flex:0 0 auto; margin-bottom:1px; padding:24px 11px 18px; border-bottom:1px solid rgba(158,177,202,.2); }
  .sidebar-menu { padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
  .sidebar-collapse-toggle { display:none; }
  .side-group { display:block; }
  .side-item { width:100%; flex:0 0 auto; min-height:44px; padding:10px 11px; font-size:13px; }
  .container { padding:16px 12px calc(28px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .mobile-nav-backdrop { transition-duration:1ms; }
}