/* =========================================================
   shell.css · 全站统一侧边栏 + 导航壳（2026-09-28）
   6 大组：总控台 / 项目 / 活动档案 / 资源库（可折叠，五库）/ 工具 / 设置
   用法：<link rel="stylesheet" href="/shell.css">  提前于页面样式
   ========================================================= */

:root{
  --sh-w: 236px;
  --sh-bg: #EDF3FB;      /* 浅蓝底 */
  --sh-bg2: #E1EAF7;     /* hover 浅蓝 */
  --sh-line: #D5E2F0;    /* 浅蓝边框 */
  --sh-txt: #34435A;     /* 深灰蓝文字 */
  --sh-dim: #8394AB;     /* 弱化文字 */
  --sh-on: #F26B21;      /* 品牌橙（保留）*/
}

body.has-shell{ padding-left: var(--sh-w); }
body.has-shell.sh-collapsed{ padding-left: 56px; }

/* ---------- 侧栏主体 ---------- */
.sh-side{
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--sh-w);
  background: var(--sh-bg); border-right: 1px solid var(--sh-line);
  display: flex; flex-direction: column; z-index: 1200;
  transition: width .18s ease; overflow: hidden;
}
body.sh-collapsed .sh-side{ width: 56px; }

/* 品牌头 */
.sh-brand{
  display: flex; align-items: center; gap: 9px; padding: 15px 14px;
  border-bottom: 1px solid var(--sh-line); flex: 0 0 auto; white-space: nowrap;
}
.sh-logo{
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
  background: linear-gradient(135deg, #F26B21, #ff8a4c);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 900;
}
.sh-bname{ font-size: 13.5px; font-weight: 800; color: #23324A; letter-spacing: .3px; }
.sh-bsub{ font-size: 10.5px; color: var(--sh-dim); margin-top: 1px; letter-spacing: .5px; }
body.sh-collapsed .sh-bname,
body.sh-collapsed .sh-bsub{ display: none; }

/* 滚动区 */
.sh-scroll{ flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 10px 8px 18px; min-height: 0; }
.sh-scroll::-webkit-scrollbar{ width: 5px; }
.sh-scroll::-webkit-scrollbar-thumb{ background: #C6D5E8; border-radius: 3px; }

/* 分组 */
.sh-grp{ margin-bottom: 4px; }
.sh-gl{
  display: flex; align-items: center; gap: 7px; padding: 9px 9px 6px;
  font-size: 10.5px; font-weight: 800; color: #8CA0B8; letter-spacing: 1.1px;
  text-transform: uppercase; white-space: nowrap; cursor: default; user-select: none;
}
.sh-gl .sh-arrow{
  margin-left: auto; font-size: 9px; color: #8CA0B8; transition: transform .18s;
  border: 0; background: transparent; cursor: pointer; padding: 2px 4px;
}
.sh-grp.sh-open > .sh-gl .sh-arrow{ transform: rotate(90deg); }
body.sh-collapsed .sh-gl{ justify-content: center; padding: 9px 0 6px; }
body.sh-collapsed .sh-gl span.sh-glt{ display: none; }

/* 条目 */
.sh-item{
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px;
  color: var(--sh-txt); text-decoration: none; font-size: 13px; font-weight: 600;
  white-space: nowrap; transition: .14s; margin-bottom: 2px; cursor: pointer;
  border-left: 3px solid transparent;
}
.sh-item:hover{ background: var(--sh-bg2); color: #1B2A40; }
.sh-item.on{
  background: linear-gradient(90deg, #FFE6D3, #FFF7F1);
  color: #C2410C; border-left-color: var(--sh-on); font-weight: 800;
  box-shadow: 0 1px 3px rgba(242,107,33,.14);
}
.sh-ico{ width: 18px; text-align: center; flex: 0 0 auto; font-size: 14px; }
.sh-lb{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sh-badge{
  flex: 0 0 auto; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px;
  background: #FDE3CE; color: #C2410C;
}
.sh-badge.gray{ background: #E4EBF5; color: #7C8CA1; }
body.sh-collapsed .sh-lb,
body.sh-collapsed .sh-badge{ display: none; }
body.sh-collapsed .sh-item{ justify-content: center; padding: 9px 0; border-left-width: 2px; }
body.sh-collapsed .sh-ico{ width: auto; }

/* 子项（五库） */
.sh-sub{ padding-left: 8px; overflow: hidden; max-height: 520px; transition: max-height .2s ease; }
.sh-grp:not(.sh-open) > .sh-sub{ max-height: 0; }
.sh-sub .sh-item{ font-size: 12.5px; padding: 7.5px 11px 7.5px 14px; }
.sh-sub .sh-ico{ font-size: 13px; }
body.sh-collapsed .sh-sub{ max-height: 0 !important; }

/* 当前项目卡 */
.sh-proj{
  margin: 6px 8px 10px; padding: 10px 11px; border-radius: 10px;
  background: linear-gradient(135deg, #FFF1E4, #FFFBF7);
  border: 1px solid #FFD9BC; cursor: pointer; transition: .15s;
}
.sh-proj:hover{ border-color: var(--sh-on); }
.sh-proj .sp-t{ font-size: 9.5px; color: #C2410C; font-weight: 800; letter-spacing: 1px; }
.sh-proj .sp-n{
  font-size: 12.5px; color: #23324A; font-weight: 700; margin-top: 4px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sh-proj .sp-m{ font-size: 10.5px; color: var(--sh-dim); margin-top: 5px; }
body.sh-collapsed .sh-proj{ display: none; }

/* 底部 */
.sh-foot{
  flex: 0 0 auto; border-top: 1px solid var(--sh-line); padding: 10px 10px 12px;
  display: flex; gap: 7px; align-items: center;
}
.sh-user{
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 7px; border-radius: 9px; transition: .14s;
}
.sh-user:hover{ background: var(--sh-bg2); }
.sh-uav{
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg,#F26B21,#ff8a4c); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900;
}
.sh-un{ font-size: 12px; color: #34435A; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-ur{ font-size: 10px; color: var(--sh-dim); }
body.sh-collapsed .sh-user .sh-un,
body.sh-collapsed .sh-user .sh-ur{ display: none; }
.sh-tg{
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--sh-line);
  background: transparent; color: #8394AB; cursor: pointer; font-size: 13px; transition: .14s;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.sh-tg:hover{ border-color: var(--sh-on); color: var(--sh-on); }

/* 移动端：抽屉 */
.sh-mask{
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1190; display: none;
}
.sh-mask.on{ display: block; }
.sh-mbtn{
  position: fixed; left: 12px; top: 12px; z-index: 1210; width: 38px; height: 38px;
  border-radius: 11px; border: 1px solid var(--sh-line); background: rgba(255,255,255,.96);
  color: #23324A; font-size: 17px; cursor: pointer; display: none; box-shadow: 0 2px 8px rgba(20,40,80,.10);
  align-items: center; justify-content: center; backdrop-filter: blur(8px);
}
@media(max-width: 900px){
  body.has-shell{ padding-left: 0; }
  body.has-shell.sh-collapsed{ padding-left: 0; }
  .sh-side{ transform: translateX(-100%); transition: transform .2s ease; width: var(--sh-w) !important; }
  body.sh-mobile-open .sh-side{ transform: translateX(0); }
  .sh-mbtn{ display: flex; }
  body.sh-collapsed .sh-side{ width: var(--sh-w) !important; }
  body.sh-collapsed .sh-bname,
  body.sh-collapsed .sh-bsub,
  body.sh-collapsed .sh-lb,
  body.sh-collapsed .sh-badge{ display: block; }
  body.sh-collapsed .sh-sub{ max-height: 520px !important; }
  body.sh-collapsed .sh-proj{ display: block; }
  body.sh-collapsed .sh-item{ justify-content: flex-start; padding: 9px 11px; }
}

/* ---------- 面包屑（子页面归属感） ---------- */
.sh-crumb{
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 12.5px; color: #8F959E; padding: 11px 0 0;
}
.sh-crumb a{ color: #8F959E; text-decoration: none; transition: .14s; }
.sh-crumb a:hover{ color: var(--sh-on); }
.sh-crumb .sh-cs{ color: #5C636D; }
.sh-crumb .sh-cc{ color: #1D1D1F; font-weight: 800; }
.sh-crumb-wrap{ max-width: 1400px; margin: 0 auto; padding: 0 22px; }
@media(max-width: 900px){ .sh-crumb-wrap{ padding: 0 12px; } .sh-crumb{ padding-top: 8px; font-size: 12px; } }

/* ---------- 统一空状态（必须带引导动作） ---------- */
.sh-empty{
  text-align: center; padding: 54px 24px; max-width: 560px; margin: 0 auto;
}
.sh-empty-ico{ font-size: 46px; line-height: 1; margin-bottom: 16px; opacity: .85; }
.sh-empty-t{ font-size: 16.5px; font-weight: 800; color: #1D1D1F; margin-bottom: 9px; letter-spacing: .2px; }
.sh-empty-d{ font-size: 13.5px; color: #8F959E; line-height: 1.85; margin-bottom: 22px; }
.sh-empty-d b{ color: #F26B21; font-weight: 800; }
.sh-empty-d code{ background: #F1F3F7; border-radius: 5px; padding: 1px 6px; color: #424246; font-size: 12.5px; }
.sh-empty-a{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sh-empty-btn{
  font-size: 13.5px; font-weight: 800; padding: 11px 24px; border-radius: 11px;
  border: 1.5px solid #E5E7EB; background: #fff; color: #424246; cursor: pointer;
  text-decoration: none; transition: .15s; display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; line-height: 1;
}
.sh-empty-btn:hover{ border-color: #F26B21; color: #F26B21; background: #FFF8F3; transform: translateY(-1px); }
.sh-empty-btn.pri{
  background: linear-gradient(135deg, #F26B21, #ff8a4c); border-color: #F26B21; color: #fff;
  box-shadow: 0 4px 14px rgba(242,107,33,.22);
}
.sh-empty-btn.pri:hover{ filter: brightness(1.06); color: #fff; }

/* 深色底（独立库页） */
.dark .sh-empty-t, body.dark .sh-empty-t{ color: #E8EAED; }
.dark .sh-empty-d, body.dark .sh-empty-d{ color: #7C838C; }
.dark .sh-empty-btn, body.dark .sh-empty-btn{ background: #1B1F24; border-color: #2E3238; color: #C9CDD4; }
.dark .sh-empty-btn:hover, body.dark .sh-empty-btn:hover{ border-color: #F26B21; color: #F26B21; background: rgba(242,107,33,.14); }

@media(max-width: 640px){
  .sh-empty{ padding: 40px 18px; }
  .sh-empty-ico{ font-size: 38px; margin-bottom: 13px; }
  .sh-empty-t{ font-size: 15px; }
  .sh-empty-d{ font-size: 12.5px; margin-bottom: 18px; }
  .sh-empty-a{ flex-direction: column; }
  .sh-empty-btn{ width: 100%; justify-content: center; padding: 12px 18px; }
}

/* ---------- 工作台（planner）接入统一壳的适配 ---------- */
body.has-shell .main{ padding-left: 0; }
body.has-shell .side-col{ display: none !important; }      /* 工作台自带阶段侧栏收进 shell「项目」组 */
body.has-shell > .main{ margin-top: 0; }
/* 工作台顶栏在侧栏右侧 */
body.has-shell header, body.has-shell .app-header{
  margin-left: 0;
}
/* 工作台内容区自适应 */
body.has-shell .content{ min-width: 0; }
@media(max-width: 900px){
  body.has-shell .side-col{ display: none !important; }
}

/* ---------- 浅蓝主题微调（2026-09-29）---------- */
.sh-side{ box-shadow: 1px 0 0 rgba(20,40,80,.04); }
.sh-brand .sh-bsub{ color: #93A6BD; }
.sh-item{ color: #3C4C63; }
.sh-item:hover{ background: #E4EDFA; }
.sh-sub .sh-item{ color: #4A5B73; }
.sh-sub .sh-item.on{ color: #C2410C; }
.sh-foot{ background: #E8F0FA; }
.sh-tg{ background: #F4F8FD; }
.sh-tg:hover{ background: #FFF1E4; }
/* 折叠态 */
body.sh-collapsed .sh-side{ background: var(--sh-bg); }
/* 移动端抽屉 */
.sh-mask{ background: rgba(20,40,80,.34); }
@media(max-width:900px){
  .sh-side{ box-shadow: 2px 0 18px rgba(20,40,80,.14); }
}

/* =========================================================
   ★ 深色模式（2026-09-29）—— 由 shell.js 切换 html[data-theme]
   亮色：默认（浅蓝侧栏 + 白主区）
   深色：深炭底 + 深灰卡 + 浅字
   ========================================================= */
html[data-theme="dark"]{
  --sh-bg: #14171C;
  --sh-bg2: #1D2128;
  --sh-line: #2A2F37;
  --sh-txt: #C3C9D4;
  --sh-dim: #79828F;
  --sh-on: #F26B21;
  /* 页面级 */
  --dk-bg: #0F1115;
  --dk-card: #191D23;
  --dk-line: #282D35;
  --dk-txt: #E4E8EE;
  --dk-dim: #8B94A2;
}
html[data-theme="dark"] .sh-side{ background: var(--sh-bg); border-right-color: var(--sh-line); box-shadow: none; }
html[data-theme="dark"] .sh-bname{ color: #E8EAED; }
html[data-theme="dark"] .sh-brand .sh-bsub{ color: #79828F; }
html[data-theme="dark"] .sh-gl{ color: #6B7480; }
html[data-theme="dark"] .sh-gl .sh-arrow{ color: #6B7480; }
html[data-theme="dark"] .sh-item{ color: #C3C9D4; }
html[data-theme="dark"] .sh-item:hover{ background: #1D2128; color: #fff; }
html[data-theme="dark"] .sh-sub .sh-item{ color: #A9B1BD; }
html[data-theme="dark"] .sh-item.on{
  background: linear-gradient(90deg, rgba(242,107,33,.22), rgba(242,107,33,.05));
  color: #FFB27A; box-shadow: none;
}
html[data-theme="dark"] .sh-sub .sh-item.on{ color: #FFB27A; }
html[data-theme="dark"] .sh-badge{ background: rgba(242,107,33,.20); color: #FFB27A; }
html[data-theme="dark"] .sh-badge.gray{ background: #262B33; color: #98A0AC; }
html[data-theme="dark"] .sh-proj{
  background: linear-gradient(135deg, rgba(242,107,33,.16), rgba(242,107,33,.04));
  border-color: rgba(242,107,33,.28);
}
html[data-theme="dark"] .sh-proj .sp-t{ color: #FFB27A; }
html[data-theme="dark"] .sh-proj .sp-n{ color: #E8EAED; }
html[data-theme="dark"] .sh-foot{ background: #111419; }
html[data-theme="dark"] .sh-user:hover{ background: #1D2128; }
html[data-theme="dark"] .sh-un{ color: #C3C9D4; }
html[data-theme="dark"] .sh-tg{ background: #1A1E24; color: #79828F; border-color: #2A2F37; }
html[data-theme="dark"] .sh-tg:hover{ background: #232830; border-color: #F26B21; color: #F26B21; }
html[data-theme="dark"] .sh-scroll::-webkit-scrollbar-thumb{ background: #2E343D; }
html[data-theme="dark"] .sh-mbtn{ background: rgba(20,23,28,.94); color: #E8EAED; border-color: #2A2F37; box-shadow: none; }
html[data-theme="dark"] .sh-mask{ background: rgba(0,0,0,.6); }

/* ---------- 主内容区深色覆盖 ---------- */
html[data-theme="dark"] .sh-themebtn{ background: #1A1E24; color: #FFB27A; border-color: #2A2F37; }

/* 工作台主区 */
html[data-theme="dark"] body{ background: var(--dk-bg) !important; color: var(--dk-txt); }
html[data-theme="dark"] header{ background: rgba(21,25,31,.92) !important; border-bottom-color: var(--dk-line) !important; color: var(--dk-txt); }
html[data-theme="dark"] .logo{ color: #E8EAED; }
html[data-theme="dark"] header select,
html[data-theme="dark"] .hbtn{ background: #1D2128 !important; border-color: var(--dk-line) !important; color: #C3C9D4 !important; }
html[data-theme="dark"] .hbtn:hover{ border-color: #F26B21 !important; color: #F26B21 !important; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .sec,
html[data-theme="dark"] .box,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .view-card{ background: var(--dk-card) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] .sec-h{ color: var(--dk-txt) !important; }
html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] label,
html[data-theme="dark"] .desc, html[data-theme="dark"] .field-tip{ color: #B6BEC9; }
html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=number],
html[data-theme="dark"] input[type=date], html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
  background: #1B1F26 !important; border-color: #2A2F37 !important; color: #E4E8EE !important;
}
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder{ color: #6B7480; }
html[data-theme="dark"] table th{ background: #1D2128 !important; color: #A9B1BD !important; }
html[data-theme="dark"] table td{ border-color: var(--dk-line) !important; color: #C3C9D4; }
html[data-theme="dark"] .ptitle-bar{ background: linear-gradient(135deg,#2A1A10,#1C1F26) !important; }
html[data-theme="dark"] .step{ color: #79828F; }
html[data-theme="dark"] footer{ color: #6B7480; }

/* 库页（本身就是深色，保持一致） */
html[data-theme="dark"] body.lib,
html[data-theme="dark"] .lib-wrap{ background: #0F1115; }

/* ---------- 「当前项目」卡移到总控台组后（2026-09-29）---------- */
.sh-grp[data-g="home"] .sh-proj{ margin: 8px 8px 10px; }
.sh-grp[data-g="home"] .sh-proj .sp-n{ -webkit-line-clamp: 2; }

/* ============ 库页主题变量（2026-09-29）============
   库页原来是硬编码深色；改成引用这些变量后，自动跟随 🌙/☀️ 切换 */
:root{
  --lb-bg:    #F5F7FA;   /* 页面底 */
  --lb-card:  #FFFFFF;   /* 卡片底 */
  --lb-panel: #FFFFFF;   /* 面板/弹层 */
  --lb-line:  #E4E8EE;   /* 分隔线/边框 */
  --lb-line2: #EDF0F4;   /* 更浅的线 */
  --lb-tx1:   #2C3036;   /* 主文字 */
  --lb-tx2:   #6B7280;   /* 次要文字 */
  --lb-tx3:   #8A9099;   /* 弱化文字 */
  --lb-br:    #1D1D1F;   /* 强调文字 */
  --lb-hover: #F0F3F8;   /* hover 底 */
  --lb-input: #FFFFFF;   /* 输入框底 */
}
html[data-theme="dark"]{
  --lb-bg:    #0F1115;
  --lb-card:  #191D23;
  --lb-panel: #1A1C1F;
  --lb-line:  #2A2E35;
  --lb-line2: #23262B;
  --lb-tx1:   #C9CDD4;
  --lb-tx2:   #9AA0A6;
  --lb-tx3:   #6B7076;
  --lb-br:    #E4E6EA;
  --lb-hover: #202327;
  --lb-input: #1B1F26;
}

/* appbar 主题补充（2026-09-29）*/
:root{
  --lb-appbar:    rgba(255,255,255,.94);
  --lb-tx-strong: #1D1D1F;
  --lb-btn-bg:    rgba(0,0,0,.045);
  --lb-btn-bd:    rgba(0,0,0,.10);
  --lb-btn-tx:    #3C4046;
}
html[data-theme="dark"]{
  --lb-appbar:    rgba(12,13,16,.92);
  --lb-tx-strong: #FFFFFF;
  --lb-btn-bg:    rgba(255,255,255,.08);
  --lb-btn-bd:    rgba(255,255,255,.14);
  --lb-btn-tx:    #C9CDD4;
}