/* ============================================================================
   shell.css —— ERP5 外壳（门户外层）
   ----------------------------------------------------------------------------
   数值来源：T+ 21.0 本机实机量测 + css/portal/portal.css 原文，逐条注明出处。
   为什么不像登录页那样直引 portal.css：那份 100K 样式深度依赖 T+ 的门户 JS
   （磁贴墙 / dragable / 皮肤切换），整份引进来会污染内容区（.footer/.navbar/.nav
   这些通用类名全在里面）。故这里只把量测值搬成独立规则，一行一注。
   对齐校验：tools/shell_cmp.cjs（逐项比 T+ 与 ERP5 的 x/y/w/h）
   ========================================================================== */

:root {
  /* 顶栏与侧栏 */
  --nav-h: 49px;            /* #navbar 实机 1560×49 */
  --menu-w: 130px;          /* #leftmenubar width:130px */
  --menu-item-h: 44px;      /* .menu-first 实机 130×44 */
  --menu-top-gap: 40px;     /* 一级菜单从 y=89 起 = 49 + 40 */
  --tabs-h: 32px;           /* .nav.nav-tabs.t-tabs 实机 1323×32 */
  --flyout-left: 149px;     /* .menu-sub { left:149px } 原文 */

  /* 品牌色（T+ 实机 computed） */
  --tp-blue: #3957EC;       /* rgb(57,87,236) 主色：菜单字/标签下划线 */
  --tp-logo-bg: #051C7F;    /* #chanjetlogo rgb(5,28,127) */
  --tp-side-a: #2B47C6;     /* 侧栏渐变起点 rgb(43,71,198) */
  --tp-side-b: #6740D0;     /* 侧栏渐变终点 rgb(103,64,208) */
  --tp-line: #d9d9d9;       /* .menu-sub 2px 边框色 */
  --tp-text: #353434;       /* .secMenu a / .thrMenu a 字色 */
  --tp-tabbar: #f9f9f9;     /* 标签栏底色 */

  --font: Arial, "Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif;
}

html, body { height: 100%; margin: 0; }
body { font-family: var(--font); font-size: 14px; color: #333; background: #fff; }

.erp5-shell { position: relative; width: 100%; height: 100vh; overflow: hidden; }

/* ---------------------------------------------------------------- 顶栏 ----
   T+：#navbar 1560×49 白底；左 130px 深蓝 logo 块；其后 210px 公司区、
   240px 账套+日期区、右侧通知区。 */
.tp-navbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: #fff;
  z-index: 5;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.tp-nav-logo {
  width: var(--menu-w);
  height: var(--nav-h);
  background: var(--tp-logo-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .5px;
}
.tp-nav-logo b { font-weight: 700; font-size: 21px; }
.tp-nav-company {
  width: 210px;
  padding: 0 20px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  font-size: 17px;
  color: #555;
  letter-spacing: 1px;
  flex: 0 0 auto;
}
.tp-nav-info {
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--nav-h);
}
.tp-nav-info .tp-user-info {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #666;
  padding: 0 15px 0 0;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-nav-info .tp-acc { cursor: pointer; }
.tp-nav-info .tp-acc:hover { color: var(--tp-blue); }

.tp-nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  height: var(--nav-h);
}
.tp-search {
  width: 200px;
  height: 32px;
  margin-right: 5px;
  border: 0;
  border-bottom: 1px solid #ccc;   /* T+ 搜索框只有下划线 */
  background: #fff;
  padding: 0 8px 0 30px;
  font-size: 14px;
  color: #48546d;
  outline: none;
}
.tp-search:focus { border-bottom-color: var(--tp-blue); }
.tp-search-wrap { position: relative; display: flex; align-items: center; margin-right: 12px; }
.tp-search-ico {
  position: absolute;
  left: 8px;
  font-size: 15px;
  color: #9aa3b2;
  pointer-events: none;
}
.tp-nav-item {
  width: 34px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #7d8798;
  cursor: pointer;
}
.tp-nav-item:hover { color: var(--tp-blue); }
.tp-nav-user {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 16px 0 10px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}
.tp-nav-user:hover { color: var(--tp-blue); }
.tp-nav-user .tp-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--tp-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
}

.tp-user-menu {
  position: absolute;
  top: 46px;
  right: 12px;
  min-width: 120px;
  background: #fff;
  border: 1px solid #e2e6ee;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(20, 40, 80, .12);
  z-index: 60;
  padding: 4px 0;
}
.tp-user-menu a {
  display: block;
  padding: 8px 16px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
}
.tp-user-menu a:hover { background: #f2f6ff; color: var(--tp-blue); }

/* ---------------------------------------------------------------- 侧栏 ----
   T+：#leftmenubar width:130px，从 49px 起；背景是竖向渐变 #2B47C6→#6740D0；
   一级菜单 .menu-first 130×44，文字 .menu-text 15px 白字 padding 10px 0 10px 12px */
.tp-menubar {
  position: absolute;
  top: var(--nav-h);
  left: 0;
  width: var(--menu-w);
  bottom: 0;
  background: linear-gradient(to bottom, var(--tp-side-a), var(--tp-side-b));
  z-index: 4;
  /* ⚠ 这里不能 overflow:hidden：飞出面板是它的子元素，一裁就整块看不见，
     而面板还在 DOM 里、z-index 也高，排查时特别费劲（实机踩到）。
     滚动交给下面的菜单列表自己管。 */
  overflow: visible;
  user-select: none;
}
.tp-menu-list {
  padding-top: var(--menu-top-gap);
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.tp-menu-list::-webkit-scrollbar { width: 4px; }
.tp-menu-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 2px; }
.tp-menu-first {
  height: var(--menu-item-h);
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.tp-menu-first:hover { background: rgba(255, 255, 255, .12); }
.tp-menu-first.on { background: rgba(255, 255, 255, .18); }
.tp-menu-text {
  font-size: 15px;
  color: #fff;
  line-height: 24px;
  padding: 10px 0 10px 12px;
  white-space: nowrap;
}
.tp-menu-first.on .tp-menu-text { font-weight: bold; }

/* -------------------------------------------------------------- 飞出面板 ----
   T+ .menu-sub：left:149px、白底、上/右/下 2px #d9d9d9 边框、radius 0 5px 5px 0、
   padding 5px 0、z-index 101；内部 .tileMenu li 浮动成多列，.secMenu 15px 粗体、
   .thrMenu a 14px。T+ 写死 width:2040px 是给 200+ 菜单项的磁贴墙；
   ERP5 菜单量小，宽度按内容自适应（唯一有意的偏离，见 OPEN-ITEMS）。 */
.tp-flyout {
  position: absolute;
  top: 0;
  left: var(--flyout-left);
  z-index: 101;
  display: none;
  min-width: 200px;
  max-height: calc(100vh - var(--nav-h) - 20px);
  overflow-y: auto;
  background: #fff;
  border-top: 2px solid var(--tp-line);
  border-right: 2px solid var(--tp-line);
  border-bottom: 2px solid var(--tp-line);
  border-left: 0;
  border-radius: 0 5px 5px 0;
  padding: 5px 0;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, .08);
}
.tp-flyout.open { display: flex; }
.tp-flyout-col { padding: 0 16px 0 10px; }
.tp-sec {
  padding: 7px 0;
  font-size: 15px;
  font-weight: bold;
  color: var(--tp-text);
}
.tp-sec a { margin-left: 8px; }
.tp-thr { padding: 3px 0 5px; }
.tp-thr a {
  display: inline-block;
  margin-left: 8px;
  font-size: 14px;
  color: var(--tp-text);
  cursor: pointer;
  white-space: nowrap;
}
.tp-thr a:hover { color: #000; text-decoration: underline; }
.tp-thr a.on { color: var(--tp-blue); font-weight: bold; }
.tp-sep { height: 1px; background: #ebebeb; margin: 4px 0; }

/* -------------------------------------------------------------- 标签栏 ----
   T+ .nav.nav-tabs.t-tabs：从 x=130 起、32px 高、底色 #f9f9f9；
   标签 li 78×32，选中项 border-bottom 3px #3957EC，字色 #3957EC */
.tp-tabs {
  position: absolute;
  /* T+ 实测标签栏 y=50（49 + 1）：#navbar 下沿有一条 1px 分隔，标签条压在它下面 */
  top: calc(var(--nav-h) + 1px);
  left: var(--menu-w);
  /* 右侧 107px 是 T+ 的 .nav-tabs-right-buttons（搜索/分屏/全部关闭）占位 */
  width: calc(100% - var(--menu-w) - 107px);
  height: var(--tabs-h);
  padding-left: 16px;   /* T+ 首个标签 li 从 x=146 起 = 130 + 16 */
  background: var(--tp-tabbar);
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 2;
  border-bottom: 1px solid #e9e9e9;
}
.tp-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--tabs-h);
  padding: 0 12px 0 12px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  flex: 0 0 auto;
}
.tp-tab:hover { background: #f1f1f1; }
.tp-tab.on { color: var(--tp-blue); border-bottom-color: var(--tp-blue); background: #fff; }
.tp-tab .tp-tab-x {
  font-size: 13px;
  color: #b6bcc8;
  padding: 0 2px;
  line-height: 1;
}
.tp-tab .tp-tab-x:hover { color: #e34d59; }

.tp-tabs-right {
  position: absolute;
  top: calc(var(--nav-h) + 1px);
  right: 14px;
  height: var(--tabs-h);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 3;
}
.tp-tab-btn {
  width: 27px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #8a93a3;
  cursor: pointer;
  border-radius: 3px;
}
.tp-tab-btn:hover { background: #e9ecf2; color: var(--tp-blue); }

/* ---------------------------------------------------------------- 内容 ----
   标签栏下沿为内容区上界（49 + 32 = 81） */
.tp-content {
  position: absolute;
  top: calc(var(--nav-h) + var(--tabs-h) + 2px);
  left: var(--menu-w);
  right: 0;
  bottom: 0;
  overflow: auto;
  background: #fff;
}

/* ------------------------------------------------------------ 加载与提示 ---- */
.tp-loading {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: #8a93a3; font-size: 13px;
}

/* ---------------------------------------------------------------- 小屏 ----
   T+ 是桌面系统，130px 窄栏在 <1100px 下会挤压内容；
   这里只做「侧栏自动收起为 48px 图标条」的降级，不改桌面端几何 */
@media (max-width: 1100px) {
  :root { --menu-w: 48px; --flyout-left: 56px; }
  .tp-menu-text { font-size: 0; }        /* 只留首字 */
  .tp-menu-text::first-letter { font-size: 15px; }
  .tp-nav-company { display: none; }
  .tp-nav-info { display: none; }
}