/* ============================================================
   Layout — Shell, Topbar, Sidebar, Content, Pages
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:13px;line-height:1.5;transition:background-color .35s var(--ease),color .35s var(--ease);}
html,body{overflow-x:hidden;}

.shell{display:grid;grid-template-columns:200px 1fr;grid-template-rows:var(--topbar-h) calc(100vh - var(--topbar-h));height:100vh;overflow:hidden;}

/* ── Topbar ── */
.topbar{grid-column:1/-1;display:flex;align-items:center;padding:0 1.25rem;border-bottom:1px solid var(--border);background:var(--s1);gap:1rem;position:sticky;top:0;z-index:50;transition:background-color .35s var(--ease),border-color .35s var(--ease);}
.logo{font-size:14px;font-weight:600;letter-spacing:-0.3px;color:var(--accent);}
.logo-sub{color:var(--muted2);font-weight:400;font-size:12px;margin-left:6px;}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:1rem;}

/* ── Agent Pills ── */
.agent-pills{display:flex;gap:6px;}
.agent-pill{font-size:10px;padding:2px 7px;border-radius:20px;border:1px solid var(--border2);color:var(--muted2);display:flex;align-items:center;gap:4px;cursor:default;transition:all .3s;}
.agent-pill.ok{border-color:var(--green);color:var(--green);}
.agent-pill.err{border-color:var(--red);color:var(--red);}
.agent-pill .dot{width:5px;height:5px;border-radius:50%;background:currentColor;}
.topbar-time{color:var(--muted2);font-size:11px;font-variant-numeric:tabular-nums;}
.topbar-bell{position:relative;cursor:pointer;font-size:16px;padding:2px 6px;border-radius:6px;transition:all .2s;}
.topbar-bell:hover{background:var(--s2);}
.quick-rem{cursor:pointer;color:var(--accent);padding:2px 6px;border-radius:4px;border:1px solid var(--border);transition:all .2s;}
.quick-rem:hover{background:var(--accent-dim);}

/* ── Theme Toggle ── */
.theme-toggle{background:var(--s2);border:1px solid var(--border);color:var(--text);cursor:pointer;font-size:16px;padding:2px 8px;border-radius:8px;transition:all .2s var(--ease);line-height:1;}
.theme-toggle:hover{background:var(--s3);border-color:var(--border2);transform:scale(1.05);}
.theme-toggle:active{transform:scale(0.95);}

/* ── Sidebar ── */
.sidebar{background:var(--s1);border-right:1px solid var(--border);padding:1rem 0;overflow-y:auto;height:calc(100vh - var(--topbar-h));transition:background-color .35s var(--ease),border-color .35s var(--ease);}
.nav-section{margin-bottom:1.25rem;}
.nav-label{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 1rem .4rem;}
.nav-item{display:flex;align-items:center;gap:8px;padding:.4rem 1rem;cursor:pointer;color:var(--muted2);font-size:12px;border-left:2px solid transparent;transition:all .1s;}
.nav-item:hover{background:var(--s2);color:var(--text);}
.nav-item.active{color:var(--accent);border-left-color:var(--accent);background:var(--accent-dim);}
.nav-icon{font-size:14px;width:18px;text-align:center;}

/* ── Content & Pages ── */
.content{overflow-y:auto;background:var(--bg);display:flex;flex-direction:column;height:calc(100vh - var(--topbar-h));transition:background-color .35s var(--ease);}
.page{display:none;padding:1.5rem;max-width:var(--page-max-w);margin-inline:auto;width:100%;min-width:0;box-sizing:border-box;overflow-x:hidden;opacity:0;transition:opacity var(--dur) var(--ease);}
.page.active{display:block;opacity:1;}
.page-title{font-size:18px;font-weight:600;margin-bottom:1.25rem;display:flex;align-items:center;gap:.5rem;}
.page-title .icon{opacity:.7;}

/* ── Grids ── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;align-items:stretch;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-bottom:1rem;align-items:stretch;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1rem;align-items:stretch;}

/* ── Responsive ── */

/* Tablet: collapse sidebar to icon strip */
@media (max-width: 1024px) {
  .shell { grid-template-columns: 56px 1fr; }
  .nav-label, .logo-sub { display: none; }
  .nav-item { justify-content: center; padding: .4rem 0; gap: 0; font-size: 0; }
  .nav-item .nav-icon { font-size: 16px; }
  .nav-item.active { border-left-color: transparent; background: var(--accent-dim); border-radius: 8px; }
  .agent-pills { gap: 4px; }
  .agent-pill { font-size: 9px; padding: 2px 5px; }
  .grid4 { grid-template-columns: 1fr 1fr; }
}

/* Mobile: bottom nav bar — 只显示图标、禁止收缩、可横向滚动 */
@media (max-width: 768px) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: 48px 1fr 56px;
  }
  .sidebar {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 56px; border-right: none; border-top: 1px solid var(--border);
    display: flex; flex-direction: row; padding: 0; z-index: 100;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;              /* Firefox: 隐藏滚动条 */
    -ms-overflow-style: none;           /* IE/Edge: 隐藏滚动条 */
  }
  .sidebar::-webkit-scrollbar { display: none; }  /* Chrome/Safari: 隐藏滚动条 */
  .nav-section { display: flex; flex-direction: row; margin: 0; align-items: center; flex-shrink: 0; }
  .nav-label { display: none; }                       /* 隐藏分组标题 */
  .nav-sub, .nav-arrow { display: none; }             /* 隐藏子菜单和箭头 */
  .nav-item { padding: .4rem .6rem; font-size: 0; flex-shrink: 0; border-left: none; border-bottom: 2px solid transparent; }
  .nav-item.active { border-left-color: transparent; border-bottom-color: var(--accent); }
  .nav-icon { font-size: 18px; width: auto; }
  .content { padding: .75rem; padding-bottom: 72px; }
  .page { padding: 0; }
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr; gap: .75rem; }
  .topbar { padding: 0 .75rem; gap: .5rem; }
  .agent-pills { display: none; }
  .page-title { font-size: 15px; margin-bottom: .75rem; }
  .stat-value { font-size: 20px; }
  /* Modal full width on mobile */
  .modal { width: 95vw; padding: 1rem; }
}

/* Extra small screens: 进一步缩小间距 */
@media (max-width: 380px) {
  .nav-item { padding: .3rem .4rem; }
  .nav-icon { font-size: 16px; }
}