/* ============================================================
   芯药 PharmaCore · 统一外壳（顶栏 + 左侧目录 + 内容滚动区）
   所有页面共用；各页自身的业务样式仍由其原 css 提供，本文件只做
   外壳与必要的冲突覆盖（加上 .shell- 前缀避免命名冲突）。
   ============================================================ */
:root{
  --shell-top-h:56px;
  --shell-side-w:220px;
  --shell-navy:#123a63;
  --shell-navy-2:#1d5fa5;
  --shell-bg:#f5f7fa;
  --shell-side-bg:#f7f8fa;
  --shell-line:#e4e7ec;
  --shell-ink:#1f2a37;
  --shell-ink2:#5c6470;
  --shell-ink3:#8a93a0;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body.shell-on{overflow:hidden;margin:0;background:var(--shell-bg);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif;}

/* ---------- 顶部横栏 ---------- */
.shell-topbar{height:var(--shell-top-h);background:var(--shell-navy);color:#fff;
  display:flex;align-items:center;justify-content:space-between;padding:0 20px;
  position:relative;z-index:500;box-shadow:0 2px 8px rgba(18,58,99,.22);flex:0 0 auto;}
.shell-brand{display:flex;align-items:center;gap:12px;}
/* Logo 底座：图标为深藏青，需白色圆角底才能与深蓝顶栏形成对比 */
.shell-logo{width:38px;height:38px;background:#fff;border-radius:9px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;padding:3px;
  box-shadow:0 1px 3px rgba(0,0,0,.20);}
.shell-logo img{height:100%;width:auto;display:block;}
.shell-brand-text .t{font-size:16px;font-weight:600;letter-spacing:.4px;line-height:1.25;}
.shell-brand-text .t .en{font-size:12.5px;font-weight:500;color:#9dc6ea;margin-left:6px;letter-spacing:.3px;}
.shell-brand-text .s{font-size:11px;color:#a9c6e0;margin-top:1px;}
.shell-topnav{display:flex;align-items:center;gap:22px;font-size:14px;}
.shell-topnav a{color:#cfe3f5;text-decoration:none;transition:color .2s;}
.shell-topnav a:hover{color:#fff;}
.shell-user{display:flex;align-items:center;gap:8px;color:#dbe9f6;font-size:13px;}
.shell-user .av{width:26px;height:26px;border-radius:50%;background:#2a7fb8;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;}

/* ---------- 左右布局 ---------- */
.shell-layout{display:flex;height:calc(100vh - var(--shell-top-h));width:100%;}

/* ---------- 左侧目录列 ---------- */
.shell-sidebar{width:var(--shell-side-w);flex:0 0 var(--shell-side-w);
  background:var(--shell-side-bg);border-right:1px solid var(--shell-line);
  display:flex;flex-direction:column;overflow-y:auto;}
.shell-side-title{padding:16px 18px 8px;font-size:11px;letter-spacing:1.5px;color:var(--shell-ink3);}
.shell-menu{padding:0 0 12px;}
/* 导航分组小标题 */
.shell-group{padding:14px 18px 5px;font-size:11px;letter-spacing:1.2px;color:#a6aebb;font-weight:500;}
.shell-group:first-child{padding-top:8px;}
.shell-item{display:flex;align-items:center;gap:10px;padding:12px 18px;color:var(--shell-ink2);
  font-size:14px;text-decoration:none;position:relative;transition:all .15s;border:none;}
.shell-item:hover{background:#edf1f5;color:var(--shell-ink);}
.shell-item .ic{width:18px;text-align:center;font-size:15px;line-height:1;opacity:.75;}
.shell-item .lb{flex:1;}
.shell-item.active{background:#e9f1fa;color:var(--shell-navy-2);font-weight:500;}
.shell-item.active .ic{opacity:1;}
.shell-item.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--shell-navy-2);border-radius:0 2px 2px 0;}
.shell-side-foot{margin-top:auto;padding:14px 18px;font-size:11px;color:var(--shell-ink3);
  border-top:1px solid var(--shell-line);}

/* ---------- 右侧内容滚动区 ---------- */
.shell-content{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;background:var(--shell-bg);}

/* ---------- 对原页面布局的冲突覆盖 ---------- */
/* companies / discovery：原为 grid(侧栏+主体)，侧栏移除后改回块级流 */
.shell-content > .app-body{display:block;}
.shell-content > .app-body > .main{min-width:0;}
/* news：原 max-width 居中，放宽并覆盖右栏 sticky 偏移 */
.shell-content > .app-main{max-width:1440px;margin:0 auto;}
.shell-content .app-main > aside.sidebar{top:16px;}
/* 独立滚动区里，表头吸顶改为贴内容区顶部 */
.shell-content thead th{top:0;}

@media print{
  body.shell-on{overflow:visible;}
  .shell-topbar,.shell-sidebar{display:none;}
  .shell-layout{display:block;height:auto;}
  .shell-content{overflow:visible;}
}
