/* ==========================================================================
   奕链 YiLink · 统一导航壳（.yl-side）
   ---------------------------------------------------------------------------
   主站与项目档案用的是同一套侧栏结构（品牌 + 分组 + 底部状态）；
   监控台原先自成一版，这里把它的侧栏接到同一套规范上：
     - 品牌区 38px 图标 / 15.5px 名称 / 11px 副标题
     - 分组标题：11.5px、弱化色、非大写
     - 导航项：2px 方角，选中为墨面反白
     - 底部：连接状态 + 只读说明
   只用于监控台（挂 .yl-side），避免影响主站既有样式。
   ========================================================================== */

.yl-side { padding: 20px 14px 16px; }

/* 与主站侧栏同宽（236px），三页切换时导航不跳位 */
@media (min-width: 821px) {
  body { grid-template-columns: 236px 1fr; }
}

/* ---- 品牌 ---- */
.yl-side .side-brand {
  gap: 11px;
  padding: 0 8px 14px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line);
}
.yl-side .side-brand .logo {
  width: 38px; height: 38px; border-radius: 9px;
}
.yl-side .side-name {
  font-family: var(--font-sans);
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em;
}
.yl-side .side-name em { font-style: normal; letter-spacing: 0.04em; }
.yl-side .side-tag {
  font-size: 11px; letter-spacing: 0.02em; color: var(--muted);
}

/* ---- 分组导航 ---- */
.yl-side-nav {
  display: flex; flex-direction: column; gap: 14px;
  margin: 0; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.yl-nav-group { display: flex; flex-direction: column; gap: 1px; }
.yl-nav-head {
  padding: 0 8px 6px;
  font-family: var(--font-sans);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: none;
}
.yl-nav-link {
  display: flex; align-items: center; width: 100%;
  padding: 7px 10px;
  text-align: left;
  font: 500 13px/1.35 var(--font-sans);
  color: var(--muted); background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color var(--m-fast) var(--ease-out),
              background-color var(--m-fast) var(--ease-out);
}
.yl-nav-link:hover { background: var(--soft-bg); color: var(--text); }
.yl-nav-link.active {
  background: var(--text);
  color: var(--page-bg);
  border-color: var(--text);
  font-weight: 600;
}
/* 旧版直排 tab 的底部下划线在侧栏里不合适 */
.yl-side-nav .view-tab::before { display: none !important; }

/* ---- 主机列表分区 ---- */
.yl-side-section {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.yl-side-section-head {
  padding: 0 8px 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--muted);
}

/* ---- 底部状态 ---- */
.yl-side-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.yl-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--muted);
}
.yl-status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); flex: none;
}
.yl-status.is-off .dot { background: var(--danger); }
.yl-side-foot-sub { font-size: 11px; color: var(--muted); opacity: 0.85; }

@media (max-width: 820px) {
  .yl-side { padding: 14px 12px 10px; }
  .yl-side-nav { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .yl-nav-group { flex: 1 1 200px; }
  .yl-side-foot { flex-direction: row; align-items: center; gap: 12px; }
}