/* タブ全体を包む透明の親エリア */
.tab-wrapper {
  display: flex;
  align-items: stretch;
  gap: var(--ds-space-4);
  padding: var(--ds-space-5);
  width: 100%;
  box-sizing: border-box;
}

/* メインタブ領域 */
.sidebar-panel {
  background-color: var(--ds-color-surface);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-3);
  box-shadow: var(--ds-shadow-soft);
  display: flex;
  gap: 16px;
  align-items: center;
}

/* メインタブ内のタブ群 */
.sidebar-panel .tabs {
  display: flex;
  gap: var(--ds-space-3);
}

/* 書類タブエリア */
.document-tab-panel {
  background-color: var(--ds-color-surface);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-3);
  box-shadow: var(--ds-shadow-soft);
  display: flex;
  align-items: center;
}

.document-tab-area {
  display: flex;
  gap: var(--ds-space-3);
  max-width: 100%;
}

/* 共通：タブボタン */
.tab-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-2) var(--ds-space-4);
  font-size: var(--ds-font-lg);
  border-radius: var(--ds-radius-pill);
  height: 36px;
  min-width: 100px;
  border: none;
  background-color: var(--ds-color-surface-muted);
  color: var(--ds-color-text);
  box-sizing: border-box;
  line-height: var(--ds-line-compact);
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
}

/* メインタブ（未処理など） */
.main-tab {
  background-color: var(--ds-color-surface-muted);
}
.main-tab:hover:not(.active) {
  background-color: #e0e0e0;
}
.main-tab.active {
  background-color: #cccccc;
}

/* 書類タブ */
.document-tab {
  background-color: var(--ds-color-surface-muted);
}
.document-tab.active {
  background-color: #cccccc;
}
.document-tab .close-btn {
  background: none;
  border: none;
  color: #000;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
  cursor: pointer;
  padding: 0;
}
.document-tab.fade-out {
  animation: fadeOut 0.3s ease forwards;
}

/* 新規申請ボタン */
.new-request-btn {
  background-color: var(--ds-color-primary);
  color: #fff;
}