/* ============================================================
   同盟理事/管理员门户 · 统一侧边栏外壳（shell）
   - 固定左侧导航，支持折叠（桌面收成图标轨道 / 移动端抽屉）
   - 5 个页面共用：index / content / members / community / admin
   - 折叠状态持久化在 localStorage(tm_side_collapsed)
   ============================================================ */
:root{
  --tm-w:236px;            /* 展开宽度 */
  --tm-w-rail:66px;        /* 折叠后图标轨道宽度 */
  --tm-acc:#1668e3;        /* 主强调色（蓝） */
  --tm-acc-bg:#eaf1ff;     /* 选中态浅蓝底 */
  --tm-ink:#1d2433;
  --tm-ink2:#5b6478;
  --tm-ink3:#97a0b3;
  --tm-line:#e9ecf3;
  --tm-side-bg:#ffffff;
}

/* 主体内容整体右移，给固定侧栏让位 */
body.tm-has-side{padding-left:var(--tm-w);transition:padding-left .22s cubic-bezier(.4,0,.2,1)}
body.tm-has-side.tm-collapsed{padding-left:var(--tm-w-rail)}

/* ───────── 侧栏容器 ───────── */
#tm-side{
  position:fixed;top:0;left:0;bottom:0;width:var(--tm-w);
  background:var(--tm-side-bg);border-right:1px solid var(--tm-line);
  display:flex;flex-direction:column;z-index:90;
  transition:width .22s cubic-bezier(.4,0,.2,1),transform .22s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 2px rgba(20,30,60,.03);
}
body.tm-collapsed #tm-side{width:var(--tm-w-rail)}

/* 品牌区 */
#tm-side .tm-brand{
  display:flex;align-items:center;gap:11px;padding:16px 16px 15px;
  border-bottom:1px solid var(--tm-line);min-height:62px;
}
#tm-side .tm-logo{
  width:36px;height:36px;flex:0 0 36px;border-radius:10px;
  background:linear-gradient(135deg,#2b7cff,#19c2c2);color:#fff;
  display:grid;place-items:center;box-shadow:0 4px 12px rgba(43,124,255,.32)
}
#tm-side .tm-logo svg{width:21px;height:21px}
#tm-side .tm-brand-txt{min-width:0;overflow:hidden}
#tm-side .tm-brand-txt b{display:block;font-size:14px;font-weight:700;color:var(--tm-ink);white-space:nowrap;letter-spacing:.1px}
#tm-side .tm-brand-txt span{display:block;font-size:11px;color:var(--tm-ink3);margin-top:2px;white-space:nowrap}
body.tm-collapsed #tm-side .tm-brand-txt{display:none}
body.tm-collapsed #tm-side .tm-brand{padding:16px 0 15px;justify-content:center}

/* 导航 */
#tm-side .tm-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 12px 8px}
#tm-side .tm-nav::-webkit-scrollbar{width:6px}
#tm-side .tm-nav::-webkit-scrollbar-thumb{background:#e2e6ef;border-radius:3px}
#tm-side .tm-group-t{
  font-size:11px;color:var(--tm-ink3);font-weight:600;letter-spacing:.4px;
  padding:14px 12px 6px;white-space:nowrap;
}
body.tm-collapsed #tm-side .tm-group-t{padding:12px 0 6px;text-align:center;font-size:0}
body.tm-collapsed #tm-side .tm-group-t::before{content:"•";font-size:13px;color:var(--tm-ink3)}
#tm-side .tm-sep{height:1px;background:var(--tm-line);margin:8px 10px}

#tm-side .tm-item{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 12px;margin:2px 0;border-radius:9px;
  color:var(--tm-ink2);font-size:13.5px;text-decoration:none;cursor:pointer;
  border:0;background:transparent;font-family:inherit;text-align:left;
  position:relative;transition:background .12s,color .12s;white-space:nowrap;
}
#tm-side .tm-item .tm-ic{
  width:20px;height:20px;flex:0 0 20px;display:grid;place-items:center;color:var(--tm-ink3);transition:color .12s
}
#tm-side .tm-item .tm-ic svg{width:18px;height:18px}
#tm-side .tm-item .tm-lab{flex:1;overflow:hidden;text-overflow:ellipsis}
#tm-side .tm-item:hover{background:#f3f6fc;color:var(--tm-acc)}
#tm-side .tm-item:hover .tm-ic{color:var(--tm-acc)}
#tm-side .tm-item.on{background:var(--tm-acc-bg);color:var(--tm-acc);font-weight:600}
#tm-side .tm-item.on .tm-ic{color:var(--tm-acc)}
#tm-side .tm-item.on::before{
  content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;background:var(--tm-acc);border-radius:0 3px 3px 0;
}
/* 角标 */
#tm-side .tm-badge{
  margin-left:auto;background:#f53f3f;color:#fff;font-size:10px;line-height:1;
  border-radius:9px;padding:3px 6px;min-width:18px;text-align:center;font-weight:600;display:none
}
#tm-side .tm-badge.on{display:inline-block}
/* 折叠态：只显示图标 */
body.tm-collapsed #tm-side .tm-item{justify-content:center;padding:9px 0}
body.tm-collapsed #tm-side .tm-item .tm-lab,
body.tm-collapsed #tm-side .tm-item .tm-badge{display:none}
body.tm-collapsed #tm-side .tm-item.on::before{left:0}
/* 折叠态用 title 提示，并显示小红点替代角标 */
body.tm-collapsed #tm-side .tm-item.has-badge .tm-ic::after{
  content:"";position:absolute;top:4px;right:14px;width:7px;height:7px;border-radius:50%;background:#f53f3f
}

/* 底部 */
#tm-side .tm-foot{border-top:1px solid var(--tm-line);padding:10px 12px 12px}
#tm-side .tm-foot .tm-item{font-size:13px}

/* ───────── 折叠/展开把手 ───────── */
#tm-toggle{
  position:fixed;top:14px;z-index:95;left:calc(var(--tm-w) - 14px);
  width:28px;height:28px;border-radius:8px;border:1px solid var(--tm-line);
  background:#fff;color:var(--tm-ink2);cursor:pointer;display:grid;place-items:center;
  box-shadow:0 2px 8px rgba(20,30,60,.12);transition:left .22s cubic-bezier(.4,0,.2,1),background .12s;
}
#tm-toggle:hover{color:var(--tm-acc);border-color:var(--tm-acc)}
#tm-toggle svg{width:16px;height:16px;transition:transform .22s}
body.tm-collapsed #tm-toggle{left:calc(var(--tm-w-rail) - 14px)}
body.tm-collapsed #tm-toggle svg{transform:rotate(180deg)}

/* 移动端遮罩 */
#tm-backdrop{
  position:fixed;inset:0;background:rgba(17,25,45,.4);z-index:85;display:none;
  -webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)
}

/* ───────── 移动端：抽屉式 ───────── */
@media(max-width:860px){
  body.tm-has-side,body.tm-has-side.tm-collapsed{padding-left:0}
  #tm-side{transform:translateX(-100%);width:var(--tm-w);box-shadow:0 0 40px rgba(0,0,0,.18)}
  body.tm-collapsed #tm-side{width:var(--tm-w)}              /* 移动端不收成轨道 */
  body.tm-mobile-open #tm-side{transform:translateX(0)}
  body.tm-mobile-open #tm-backdrop{display:block}
  /* 移动端：品牌/文字始终展开 */
  body.tm-collapsed #tm-side .tm-brand-txt{display:block}
  body.tm-collapsed #tm-side .tm-brand{padding:16px 16px 15px;justify-content:flex-start}
  body.tm-collapsed #tm-side .tm-item{justify-content:flex-start;padding:9px 12px}
  body.tm-collapsed #tm-side .tm-item .tm-lab,
  body.tm-collapsed #tm-side .tm-item .tm-badge.on{display:inline-block}
  body.tm-collapsed #tm-side .tm-group-t{padding:14px 12px 6px;text-align:left;font-size:11px}
  body.tm-collapsed #tm-side .tm-group-t::before{content:none}
  /* 移动端把手固定在左上角，常驻 */
  #tm-toggle,body.tm-collapsed #tm-toggle{left:12px;top:12px}
  body.tm-collapsed #tm-toggle svg{transform:none}
}