/* Bootstrap 5では網羅されない、このアプリ独自のスタイルのみをここに置く。
   基本的な配色・フォーム・ボタン・テーブルの見た目はBootstrap側に任せる。 */

:root {
  --bs-body-font-family: -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
}

main.container-fluid {
  max-width: 1400px;
}

/* ==========================================================================
   配色を緑ベースに変更する。
   Bootstrap 5.3のCSSはSassでコンパイル済みのため、一部の色（ボタン・チェックボックス・
   ページネーション等）は --bs-primary を上書きするだけでは反映されない箇所がある。
   そのため、CSS変数の上書きに加えて該当コンポーネントも個別に上書きしている。
   ========================================================================== */
:root {
  --bs-primary: #198754;
  --bs-primary-rgb: 25, 135, 84;
  --bs-link-color: #146c43;
  --bs-link-color-rgb: 20, 108, 67;
  --bs-link-hover-color: #0f5132;
  --bs-link-hover-color-rgb: 15, 81, 50;
  --bs-focus-ring-color: rgba(25, 135, 84, 0.25);
}

/* .table / .pagination はBootstrap自身がこれらのCSS変数を要素にローカルスコープで
   再定義しているため、:rootでの上書きは効かない。同じセレクタで直接上書きする。 */
.table {
  --bs-table-striped-bg: rgba(25, 135, 84, 0.09);
  --bs-table-hover-bg: rgba(25, 135, 84, 0.13);
}

.pagination {
  --bs-pagination-active-bg: #198754;
  --bs-pagination-active-border-color: #198754;
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

.btn-primary {
  --bs-btn-bg: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-bg: #157347;
  --bs-btn-hover-border-color: #146c43;
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-bg: #146c43;
  --bs-btn-active-border-color: #13653f;
  --bs-btn-disabled-bg: #198754;
  --bs-btn-disabled-border-color: #198754;
}

.form-check-input:checked {
  background-color: #198754;
  border-color: #198754;
}
.form-check-input:focus {
  border-color: #75c29a;
}

.navbar.bg-brand { background-color: #0f3d24 !important; }

.thumb { width: 48px; height: auto; border-radius: 3px; }
.cover-preview { max-width: 160px; display: block; margin-top: 0.5rem; }

/* タグ・プラットフォーム管理画面のドラッグ&ドロップ並び替え */
.drag-handle {
  cursor: grab;
  color: var(--bs-secondary-color);
  font-weight: bold;
  padding: 0 0.3rem;
  user-select: none;
  touch-action: none;
}
.list-group-item[draggable="true"] { cursor: grab; }
.list-group-item.dragging { opacity: 0.4; }
.genre-name-input { width: 12rem; max-width: 100%; }

/* ==========================================================================
   スマートフォン向けレスポンシブ対応（幅700px以下）：
   一覧テーブルを横スクロール表からカード表示に切り替える
   ========================================================================== */
@media (max-width: 700px) {
  .table-scroll { overflow-x: visible; }
  table, thead, tbody, th, tr, td { display: block; }
  thead { display: none; }
  tbody tr {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    margin-bottom: 0.7rem;
    padding: 0.3rem 0.6rem;
  }
  tbody td {
    border: none !important;
    border-bottom: 1px dashed var(--bs-border-color) !important;
    padding: 0.5rem 0.1rem;
    font-size: 0.95rem;
  }
  tbody td:last-child { border-bottom: none !important; }
  tbody td::before {
    content: attr(data-label);
    display: block;
    font-weight: bold;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    margin-bottom: 0.15rem;
  }
}