/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* ── クチコミ一覧テーブル ───────────────────────────────── */

/* フォントサイズ 14px（口コミ一覧・共通一覧テーブル共通） */
.reviews-table, .list-table { font-size: 14px; }

/* テーブルはページ全体でスクロールさせる（一括操作ボタン・ページャーも一緒に流す）。
   内部スクロール枠にはしないので、見出しはビューポート基準で上部に固定できる。 */
.reviews-table-wrap, .list-table-wrap {
  overflow: visible;
}

/* th をページスクロール時にビューポート上部へ固定 */
.reviews-table thead th,
.list-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--surface-2, #f1f3f5);
}

/* 行は「編集」ボタンから開く（行自体はクリック対象ではない） */

/* 悪評行：薄い赤 */
.reviews-table tr.review-negative > td { background-color: #fdecec !important; }

/* 論理削除行：グレー・淡色（悪評より優先。ルールを後に置いて優先） */
.reviews-table tr.review-deleted > td {
  background-color: #e6e8ea !important;
  color: #9aa0a6 !important;
}

/* お客様画面だけ：悪評進捗ステータスによる行の背景色
   （管理者一覧の行には progress-* クラスを付けていないため影響しない） */
.reviews-table tr.progress-requesting > td        { background-color: #FBE9EB !important; }
.reviews-table tr.progress-branch_requesting > td { background-color: #FCF9D7 !important; }

/* ══════════════════════════════════════════════════════════
   テーマ（Claude 風：温かいオフホワイト地＋コーラル系アクセント）
   軽さは保ちつつ、余白・繊細な境界線・控えめな影で上質感を出す
   ══════════════════════════════════════════════════════════ */
:root {
  --paper:        #f4f2ec;   /* ページ背景（温かい紙色） */
  --surface:      #ffffff;   /* カード等の面 */
  --surface-2:    #faf8f2;   /* テーブル見出しなど僅かに沈めた面 */
  --ink:          #23221f;   /* 主要テキスト */
  --ink-soft:     #57544d;   /* 準テキスト */
  --muted:        #8a8578;   /* 補助テキスト */
  --line:         #e6e2d8;   /* 境界線 */
  --line-strong:  #d9d4c7;
  --accent:       #6d4d78;   /* プラム（ダルパープル・メインアクセント） */
  --accent-hover: #5c4066;
  --accent-soft:  #efe8f2;   /* アクセントの淡色背景 */
  --radius:       12px;
  --radius-sm:    9px;
  --shadow-sm:    0 1px 2px rgba(35,34,31,.04), 0 1px 3px rgba(35,34,31,.05);
  --shadow-md:    0 6px 20px rgba(35,34,31,.07);
}

body.bg-light {
  background-color: var(--paper) !important;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h5 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── ナビバー ─────────────────────────────────────────── */
.app-navbar {
  background-color: rgba(250, 249, 245, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.app-brand {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.app-brand::before {
  content: "";
  width: 22px; height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), #a888b4);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.app-brand-accent { color: var(--accent); }

.app-nav { gap: 0.15rem; }
.app-nav .nav-link {
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}
.app-nav .nav-link:hover { color: var(--accent); background-color: var(--accent-soft); }
.app-nav .nav-link.active { color: var(--accent); background-color: var(--accent-soft); font-weight: 600; }

.app-user { color: var(--ink-soft); font-weight: 500; }

/* ゴースト（枠線）ボタン：ナビ用 */
.app-btn-ghost {
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  background: transparent;
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-weight: 500;
  transition: all .15s ease;
}
.app-btn-ghost:hover { color: var(--ink); border-color: var(--muted); background: rgba(0,0,0,.02); }

/* ── カード ───────────────────────────────────────────── */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--surface);
  box-shadow: var(--shadow-sm);
}
.card-header {
  background-color: var(--surface);
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  color: var(--ink);
  border-top-left-radius: var(--radius) !important;
  border-top-right-radius: var(--radius) !important;
}

/* ── ボタン ───────────────────────────────────────────── */
.btn { border-radius: var(--radius-sm); font-weight: 500; }
.btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}
.btn-outline-primary { color: var(--accent); border-color: var(--accent); }
.btn-outline-primary:hover, .btn-outline-primary:active {
  background-color: var(--accent) !important; border-color: var(--accent) !important;
}
.btn-check:checked + .btn-outline-primary { background-color: var(--accent); border-color: var(--accent); }

/* エクスポート切り替え：青系（紫のアクセントは使わない）
   OFF＝青の枠線 / ON＝青の塗り */
.btn-export-off {
  color: #0d6efd !important;
  border-color: #0d6efd !important;
  background-color: transparent !important;
}
.btn-export-off:hover, .btn-export-off:focus, .btn-export-off:active {
  color: #fff !important;
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}
.btn-export-on,
.btn-export-on:hover, .btn-export-on:focus, .btn-export-on:active {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}

/* ── フォーム ─────────────────────────────────────────── */
.form-control, .form-select {
  border-color: var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem rgba(109, 77, 120, 0.18);
}

/* ── テーブル ─────────────────────────────────────────── */
.reviews-table thead th,
.list-table thead th {
  color: var(--ink);
  font-weight: 700;
  border-bottom: 1px solid var(--line-strong) !important;
}
.reviews-table.table-bordered > :not(caption) > * > *,
.list-table.table-bordered > :not(caption) > * > * { border-color: var(--line); }

/* 行ホバー：一切の視覚変化なし（table-hover を使わず、ホバー用ルールも置かない） */

/* 補助テキスト（.text-muted）：Bootstrap 標準の半透明グレーは
   クリーム地では沈んで読みにくいため、しっかり濃い色に上書きする。 */
.text-muted { color: #2c2a26 !important; }

/* ── アラート・トースト ───────────────────────────────── */
.alert { border-radius: var(--radius); border: 1px solid var(--line); }

/* ── ページネーション ─────────────────────────────────── */
.pagination { --bs-pagination-color: var(--ink-soft); }
.page-link { color: var(--ink-soft); border-color: var(--line); }
.page-link:hover { color: var(--accent); background-color: var(--accent-soft); }
.page-item.active .page-link { background-color: var(--accent); border-color: var(--accent); }