/* ===== Sidebar — 全ページ共通 ===== */
:root {
  --sb-w:         220px;
  --sb-bg:        #FFFFFF;
  --sb-border:    #E7E0D8;
  --sb-shadow:    2px 0 10px rgba(78,74,70,.06);
  --sb-active-bg: #EAF1F3;
  --sb-active-tx: #5F7F8E;
  --sb-tx:        #6F6A64;
  --sb-tx-sub:    #B5AFA8;
}

/* サイドバー幅だけ本文を右へ押し出す */
body {
  margin-left: var(--sb-w) !important;
}

/* ===== サイドバー本体 ===== */
.app-sidebar {
  position: fixed;
  left: 0; top: 0;
  width: var(--sb-w);
  height: 100vh;
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  box-shadow: var(--sb-shadow);
  display: flex;
  flex-direction: column;
  z-index: 500;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ===== ブランド / ロゴ ===== */
.sb-brand {
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--sb-border);
  flex-shrink: 0;
}
.sb-brand-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.sb-brand-icon {
  width: 30px; height: 30px;
  background: #EAF1F3;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sb-brand-icon svg { width: 15px; height: 15px; color: #5F7F8E; }
.sb-brand-name {
  font-size: 13px;
  font-weight: 700;
  color: #4E4A46;
  letter-spacing: .01em;
  line-height: 1.2;
}
.sb-brand-sub {
  font-size: 10px;
  color: var(--sb-tx-sub);
  margin-top: 2px;
}

/* ===== ナビゲーション ===== */
.sb-nav {
  flex: 1;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sb-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sb-tx);
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, color .12s;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}
.sb-item:hover:not(.sb-item--wip) {
  background: #F4F0EB;
  color: #4E4A46;
}
.sb-item:hover:not(.sb-item--wip) .sb-icon { color: #7A746E; }
.sb-item.active {
  background: var(--sb-active-bg);
  color: var(--sb-active-tx);
  font-weight: 600;
}
.sb-item.active .sb-icon { color: var(--sb-active-tx); }
.sb-item--wip {
  opacity: .55;
  cursor: default;
}

.sb-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--sb-tx-sub);
  transition: color .12s;
}
.sb-label { flex: 1; }

.sb-wip-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  background: #EDE8E2;
  color: #AEA89E;
  border-radius: 4px;
  letter-spacing: .04em;
  flex-shrink: 0;
}

/* ===== 区切り線 ===== */
.sb-divider {
  height: 1px;
  background: var(--sb-border);
  margin: 8px 4px;
}

/* ===== 下部 ===== */
.sb-bottom {
  padding: 8px 8px 16px;
  border-top: 1px solid var(--sb-border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}