@charset "UTF-8";
:root {
  --LOGO-COLOR-PRIMARY: #CC0022;
  --LOGO-COLOR-DARK: #666666;
  --LOGO-COLOR-LIGHT: #999999;
}

[data-bs-theme=dark] {
  --LOGO-COLOR-PRIMARY: #ff4455;
  --LOGO-COLOR-DARK: #f0f0f0;
  --LOGO-COLOR-LIGHT: #cccccc;
}

/* ウィンドウ全体のコンテナ：スクロールを禁止し、縦方向のフレックスボックスとして定義 */
.settings-window-container {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* ヘッダー部：高さを固定し、適切な余白を維持 */
.settings-header {
  flex: 0 0 auto;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
  z-index: 100;
}

/* メインボディ部：ここだけをスクロール可能にする */
.settings-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 1.5rem;
  position: relative;
  /* Bootstrap の .table-responsive が持つ overflow 属性が
     position: sticky を阻害するため、上書きして解除します */
}
.settings-body .table-responsive {
  overflow: visible;
}

/* フッター部：最下部に固定 */
.settings-footer {
  flex: 0 0 auto;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--bs-border-color);
  background-color: var(--bs-tertiary-bg);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  z-index: 100;
}

/* テーブルの見出し固定設定 */
.settings-table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}
.settings-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--bs-body-bg);
  /* 固定時に下の行と重なった際、境界を明確にするためのシャドウ */
  box-shadow: inset 0 -1px 0 var(--bs-border-color);
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: none;
  white-space: nowrap;
}
.settings-table tbody tr:last-child td {
  border-bottom: none;
}

/* カラム幅の定義 */
.col-field-name {
  width: 180px;
}

/* 少し縮めて項目名用のスペースを確保 */
.col-display-name {
  width: 140px;
}

/* 新規追加: 項目名列の幅 */
.col-size {
  width: 130px;
}

.col-move {
  width: 100px;
}
