/* reserve.css — Reserve 管理画面固有スタイル。
   shared.css の後に読み込む。共通トークンを上書き・拡張する。 */

/* ============ Reserve 固有トークン ============ */
:root {
  --line-green: #06c755;
  --font-outfit: 'Outfit', 'Inter', sans-serif;
  --font-inter: 'Inter', -apple-system, sans-serif;
  /* shared.css の変数エイリアス（Reserve は --font-body = Inter） */
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-heading: 'Outfit', 'Inter', sans-serif;
}

/* ============ Body（Reserve 独自の背景グラデーション） ============ */
body {
  background: radial-gradient(circle at 10% 20%, rgba(240, 253, 244, 0.5) 0%, rgba(248, 250, 252, 1) 90%);
}

/* ============ サイドバー（Reserve 独自装飾） ============ */
aside nav li#nav-rsv-settings.active {
  background: #6366f1;
  color: white;
}

/* --- リズム・遷移（Biz と同じ調整） --- */
aside nav li {
  /* flex で横並び（旧インラインフローだと nav-badge の有無でアイコン左端が
     項目ごとにズレた＝予約一覧だけ右にズレる不具合。flex で左端を完全一致） */
  display: flex;
  align-items: center;
  /* 上下を少しゆったり・項目間にわずかな間（呼吸）。transition は色のみに絞る */
  padding: 11px 14px;
  margin-bottom: 5px;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, padding .2s ease;
}
/* 選択中はホバーしても背景・白文字を維持（同色on同色で文字が消えるのを防ぐ） */
aside nav li.active:hover {
  background: var(--primary);
  color: #fff;
}
aside nav li#nav-rsv-settings.active:hover { background: #6366f1; color: #fff; }

/* --- ナビ頭文字バッジ（Biz と同デザイン・色は emerald 系トークン） --- */
.nav-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  border-radius: 7px;
  background: transparent;
  color: var(--primary);
  box-shadow: inset 0 0 0 1.5px rgba(16, 185, 129, .45);   /* 細い枠（ストローク） */
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  font-style: normal;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, margin-right .2s ease;
}
aside nav li:hover .nav-ico {
  box-shadow: inset 0 0 0 1.5px rgba(16, 185, 129, .75);
}
/* 選択中：行が emerald 背景なのでバッジは白抜き＋濃い文字でくっきり */
nav li.active .nav-ico {
  background: #fff;
  color: var(--primary);
  box-shadow: none;
}
nav li.active:hover .nav-ico { background: #fff; }
/* 選択中の行頭に縦バー（inset shadow で角丸を崩さず） */
aside nav li.active {
  box-shadow: inset 3px 0 0 rgba(0, 0, 0, .18);
}

/* グループ見出しの間を広げて呼吸を作る */

/* グループ区切り（業務／設定・管理）。クリック不可の小見出し。 */
aside nav li.nav-sep {
  pointer-events: none;
  cursor: default;
  border-radius: 0;
  margin: 16px 6px 4px;
  padding: 12px 14px 2px;
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-muted);
}
aside nav li.nav-sep:hover {
  background: transparent;
  color: var(--text-muted);
}

/* 要対応バッジ（未読＝未確認予約の件数）。Biz と同じ上品な赤丸ピル。
   li 自体は親ルールで既に flex。ここで gap を足すとアイコン〜ラベル間が
   通常項目（.nav-ico の margin-right のみ）より広くなり、予約一覧だけ
   ラベル開始位置が右にズレるため gap は付けない。 */
aside nav li:has(.nav-badge) .nav-badge { margin-left: auto; }
.nav-badge {
  background: linear-gradient(180deg, #c25c54 0%, var(--error-text, #b4524a) 100%);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  box-shadow: 0 1px 2px rgba(180, 82, 74, .35);
}
aside nav li.active .nav-badge {
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55);
}
.nav-badge.hidden { display: none; }

/* ============ サイドバー折りたたみ（PC幅・細いアイコンバー・Biz と同方式） ============ */
.sidebar-head {
  display: flex;
  /* 上寄せ固定（center だと折りたたみで min-height が伸びた分ロゴが縦中央へ
     降りてきて、ロゴ下の折りたたみボタンと重なる） */
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  /* 折りたたみ時はボタンがロゴ下に来る分だけ高くなる。flex-direction の
     flip（アニメ不能・navが34px縦ジャンプ）でなく min-height の遷移で表現 */
  min-height: 30px;
  transition: min-height .2s ease;
}
.sidebar-head .logo { margin-bottom: 0; padding: 0; transition: padding .2s ease; }
/* 展開時=アイコン+ワードマーク（文字入りロゴ）+製品名のセット / 折りたたみ時=アイコンのみ
   （ワードマーク・製品名は nav-label 扱いで折りたたみ時に自動で隠れる）。
   横長の名称文字列を画像+短い製品名に置き換え、折りたたみボタンのはみ出しを構造的に防ぐ。 */
.sidebar-head .logo-mark { height: 28px; }
.sidebar-head .logo-wordmark { height: 20px; }
.sidebar-head .logo-suffix {
  font-size: 15px; font-weight: 800; color: var(--primary); letter-spacing: -0.3px;
  /* 文字の下端をワードマークの下端に光学的に揃える（Reserve はディセンダー無しのため微調整2px） */
  align-self: flex-end; line-height: 1; margin-bottom: 2px;
}
.sidebar-collapse-btn {
  /* 絶対配置にして top/right の遷移で滑らかに移動させる
     （展開時=ロゴ右横 / 折りたたみ時=ロゴ下中央。flex 内だと配置換えが即時ジャンプになる） */
  position: absolute;
  top: 32px; right: 16px;
  transition: top .2s ease, right .2s ease, background .15s ease, color .15s ease;
  width: 30px; height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  padding: 0;
}
.sidebar-collapse-btn:hover { background: var(--primary-light); color: var(--primary); }

aside.collapsed { width: 64px; padding-left: 8px; padding-right: 8px; }
aside.collapsed .nav-label { display: none; }
/* モードバナー・グループバナーの折りたたみ時の消え方は shared.css が
   max-height/opacity の遷移で高さごと潰す（display flip だと nav が縦にガタつく） */
aside.collapsed .sidebar-head { min-height: 64px; }
aside.collapsed .sidebar-collapse-btn { top: 66px; right: 17px; }
/* ロゴ中央寄せは justify-content flip でなくアニメ可能な padding で
   （マーク左端: 展開 16px → 折りたたみ 8+10=18px = (64-28)/2） */
aside.collapsed .logo { padding-left: 10px; }
/* 開閉をジャンプさせない: 位置は justify-content 等の flip でなく、アニメーション
   可能な padding だけで表現し、幅トランジションと一緒に滑らかに動かす。
   アイコン中心 = aside padding 8px + li padding-left 13px + アイコン半分 11px
   = 32px（= 幅 64px の中央） */
aside.collapsed nav li { padding: 11px 0 11px 13px; }
/* 区切りは基本と同じ余白を維持（上の li ルールが同詳細度・後勝ちで潰すため明示） */
aside.collapsed nav li.nav-sep { padding: 12px 14px 2px; }
/* 折りたたみ時は行頭の縦バーを消し、選択中はアイコン自体を塗りで示す */
aside.collapsed nav li.active { box-shadow: none; background: transparent; }
aside.collapsed nav li#nav-rsv-settings.active { background: transparent; }
aside.collapsed nav li.active .nav-ico {
  background: var(--primary);
  color: #fff;
  box-shadow: none;
}
/* 区切りはラベルを透明化のみ（display は残す）にして高さを一定に保つ。
   高さが変わると展開の瞬間に下の項目全部が縦にガタつくため */
aside.collapsed nav li.nav-sep .nav-label { display: inline; }
/* バッジは折りたたみ時、アイコン右上に小さな赤点で重ねる（display は flex のまま） */
aside.collapsed nav li:has(.nav-badge) { position: relative; }
aside.collapsed .nav-badge {
  position: absolute; top: 4px; right: 10px;
  min-width: 8px; height: 8px; padding: 0; font-size: 0;
}
aside.collapsed .sidebar-bottom button { padding: 8px 0; }
aside.collapsed .sidebar-bottom .nav-ico { margin-right: 0; }

/* ============ メインコンテンツ ============ */
main {
  flex: 1;
  overflow-y: auto;
  padding: 48px 52px;
  position: relative;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 36px;
}

h1 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-main);
}

.user-profile {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* ============ カード（Reserve 拡張） ============ */
.card h2 {
  letter-spacing: -0.2px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.card-header h2 {
  margin: 0;
}

/* ============ ダッシュボード統計 ============ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-5);
  margin-bottom: 28px;
}

.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  padding: 22px 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: box-shadow 0.25s ease;
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
}

.stat-label {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* 入力欄の小見出しラベル（管理画面共通・旧インラインstyleを集約） */
.input-label {
  font-size: var(--text-base);
  font-weight: 500;
  display: block;
  margin-bottom: var(--space-2);
}

/* セクション小見出し（大文字・グレー・フォーム内の項目名） */
.section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* 薄いグレー文字（補足・副次情報） */
.muted-text {
  color: var(--text-muted);
}

/* ユーティリティ（頻出インラインstyleを集約・単一目的）。display:none はJS制御のため対象外 */
.w-auto { width: auto; }
.w-full { width: 100%; }
.fs-13 { font-size: var(--text-sm); }
.fs-14 { font-size: var(--text-base); }
/* 等幅の小バッジ（ID・コード表示） */
.badge-mono { padding: 2px 10px; font-size: var(--text-xs); font-family: monospace; }
/* アイコン＋ラベルの横並び */
.inline-row { display: inline-flex; align-items: center; gap: 4px; }
/* 完全一致で多用される flex 塊（全プロパティ込みで集約・余白も同一の箇所のみ） */
.field-row { display: flex; align-items: center; gap: var(--space-2); margin-top: 4px; }
.code-fill { flex: 1; word-break: break-all; }
.var-btn-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-2); }
.split-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.stat-value {
  font-family: var(--font-heading);
  /* 600px→22px, 900px→32pxへ線形補間。旧: 600px境目でのメディアクエリ2値切替 */
  font-size: clamp(22px, 2px + 3.33vw, 32px);
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--primary);
}

.stat-value-cancelled { color: #dc2626; }
.stat-value-noshow    { color: #ea580c; }

/* 最優先KPI帯（.today-summary-bar / .today-summary-card）は /shared/shared.css に
   統合済み（Biz と共通・2026-07-17 昇格）。ここには Reserve 固有の指定だけ残す。 */
#stat-unread-card { cursor: pointer; }

/* 「これからの予約」カード: 時刻を主役にしたジャンプ率（時刻>>名前>メニュー）。
   カード境界は薄い罫線のみ・box-shadowは使わない */
.upcoming-rsv-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.upcoming-rsv-card:last-child { border-bottom: none; }
/* 未確認かどうかは右端の badge だけで示す（背景色との二重強調をやめて統一・2026-07-17） */
.upcoming-rsv-time { flex: none; width: 76px; text-align: right; }
.upcoming-rsv-hm { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; line-height: 1.1; }
.upcoming-rsv-date { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.upcoming-rsv-body { flex: 1; min-width: 0; }
.upcoming-rsv-name { font-weight: 600; font-size: var(--text-base); }
.upcoming-rsv-detail { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }

/* 月次サマリー（折りたたみ内）: 補足的な振り返り情報なのでトーンを一段落とし、
   最優先2枚との主従を視覚的にはっきりさせる */
#dashboard-summary-fold .stat-card {
  background: var(--bg-main);
  box-shadow: none;
}
#dashboard-summary-fold .stat-value { font-size: 26px; }

/* ============ テーブル（Reserve 拡張） ============ */
.table-container {
  overflow-x: auto;
  margin-top: var(--space-4);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  background: white;
  padding: var(--space-3) var(--space-4);
  border-radius: 16px;
  border: 1px solid var(--border);
}

.search-box {
  position: relative;
  flex: 1;
  max-width: 400px;
}

.search-box::before {
  content: '🔍';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-base);
  pointer-events: none;
}

.search-box input {
  width: 100%;
  padding: 10px 16px 10px 42px;
  border-radius: 12px;
}

.search-box input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
  outline: none;
}

.filter-group {
  display: flex;
  gap: var(--space-2);
}

.filter-group select {
  padding: 8px 14px;
  border-radius: 10px;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  width: auto;
}

.filter-group select:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

tr.selected-row td {
  background-color: var(--primary-light) !important;
}

tr:hover td {
  background: #f8fafc;
}

/* ============ ボタン（Reserve 拡張） ============ */
button {
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.18);
}

button:hover {
  transform: translateY(-1px);
}

button:active {
  transform: translateY(0);
}

button.secondary:hover {
  transform: none;
}

/* 一覧行のアクションボタン（確認済/未確認・編集…）。文字数差で幅がズレない
   よう min-width で揃える。複数並ぶときは row-actions で間隔を統一。 */
.row-actions {
  display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle;
}
button.act-btn {
  min-width: 64px; text-align: center;
  padding: 4px 10px; font-size: var(--text-sm);
}

/* 未確認予約の対応ボタン＝押していい操作だと一目で分かるよう塗りで強調。
   行側の左バー・背景は廃止し、色はこのボタン1箇所だけに絞る
   （グラデーションではなく単色塗り・2026-07-17） */
button.rsv-ack-btn-todo {
  min-width: 88px;
  background: var(--error-text, #b4524a);
  color: #fff;
  border-color: var(--error-text, #b4524a);
  font-weight: 600;
}
button.rsv-ack-btn-todo:hover {
  filter: brightness(1.08);
}
button.rsv-ack-btn-done {
  min-width: 88px;
  color: var(--text-muted);
  background: transparent;
  opacity: .75;
}
button.rsv-ack-btn-done:hover {
  opacity: 1;
}

.btn-refresh {
  padding: var(--space-2) var(--space-3);
  border-radius: 10px;
  border: 1px solid var(--border);
  background: white;
  font-size: 15px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1;
  box-shadow: none;
}

.btn-refresh:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
  transform: none;
}

.btn-refresh.loading {
  animation: spin 0.8s linear infinite;
  pointer-events: none;
  opacity: 0.6;
}

/* ============ バッジ（Reserve 追加種別） ============ */
.badge-noshow { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }

/* LINE設定ステップ（.line-setup-step / .line-step-* / .line-field-*）は
   /shared/shared.css に統合済み（Biz と共通・色は --bg-main/--text-muted/--primary 参照）。 */

/* ============ トグルスイッチ ============ */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #e2e8f0;
  transition: .3s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

input:checked + .slider             { background-color: var(--line-green); }
input:checked + .slider:before      { transform: translateX(18px); }

/* ============ ログイン ============ */
#login-overlay {
  background: radial-gradient(circle at 30% 20%, rgba(240, 253, 244, 0.6) 0%, rgba(248, 250, 252, 1) 80%);
}

#login-box {
  background: white;
  padding: 48px;
  border-radius: 24px;
  width: 400px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}

.logo {
  font-family: var(--font-heading);
}

/* ============ 業務時間テーブル ============ */
.hours-table { border: none; }
.hours-table th, .hours-table td { border-bottom: 1px solid #f1f5f9; }
.hours-table input[type="time"] { margin-bottom: 0; padding: 6px 10px; width: auto; }

/* ============ 通知メッセージ入力欄 ============ */
/* 文章を書く欄。monospace は窮屈なので本文フォント・ゆったり行間にする。
   変数 {xxx} はそのまま打てるが、可読性優先で等幅にはしない（プレビューで確認できる）。 */
.notif-textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  padding: 14px var(--space-4);
  resize: vertical;
  min-height: 120px;
}

/* ============ レスポンシブ（Reserve 固有） ============ */
@media (max-width: 900px) {
  main { padding: var(--space-6) var(--space-4); }
  #login-box { width: 90vw; padding: var(--space-8) var(--space-6); }
}

/* ベース(非表示)は必ず @media より前に置く。後ろに置くと同詳細度の後勝ちで
   モバイル用 display:inline-flex が常に打ち消され、トグルが永久に出ない */
#sidebar-toggle  { display: none; }
#sidebar-overlay { display: none; }

@media (max-width: 600px) {
  #sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 20px;
    margin-right: var(--space-3);
    flex-shrink: 0;
    /* Bizのトグルと同じゴースト調（primary継承だと目立ちすぎる） */
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    box-shadow: none;
    padding: 0;
  }
  #sidebar-toggle:hover { background: var(--bg-main); transform: none; }

  #sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  #sidebar-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  main { width: 100%; }

  header {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
}

/* モバイルはオーバーレイ式＝PC折りたたみ（細バー）を無効化しフル幅で開く */
@media (max-width: 600px) {
  aside.collapsed { width: 240px; padding: var(--space-6) var(--space-4); }
  /* shared.css は折りたたみ時にラベルを opacity:0 で消すため、display と
     あわせて opacity も戻さないと文字が透明のままになる */
  aside.collapsed .nav-label { display: inline; opacity: 1; }
  /* モバイルでは折りたたみ非表示の !important を降ろし、JS/インラインの表示判断に戻す
     （revert で CSS の display 指定を取り消す＝admin 以外では隠れたまま） */
  /* デスクトップ折りたたみ用のバナー潰し（shared.css）を解除 */
  aside.collapsed .admin-banner { max-height: 72px; opacity: 1; margin: 0 12px 20px; padding: 9px 12px; border-width: 1px; }
  aside.collapsed #group-banner { max-height: 72px; opacity: 1; margin: 0 12px 16px; padding: 10px 14px; }
  /* デスクトップ折りたたみ用のヘッダー高さ・ロゴ寄せを解除 */
  aside.collapsed .sidebar-head { min-height: 30px; }
  aside.collapsed .logo { padding-left: 0; }
  aside.collapsed nav li { justify-content: flex-start; text-align: left; padding: 11px 14px; }
  aside.collapsed nav li .nav-ico { margin-right: 10px; }
  aside.collapsed nav li.active .nav-ico { background: #fff; color: var(--primary); }
  /* デスクトップ折りたたみ用の「active 背景を透明化」を解除
     （白文字が透明背景に乗って見えなくなるため） */
  aside.collapsed nav li.active { background: var(--primary); box-shadow: inset 3px 0 0 rgba(0, 0, 0, .18); }
  aside.collapsed nav li#nav-rsv-settings.active { background: #6366f1; }
  aside.collapsed nav li:has(.nav-badge) { display: flex; position: static; }
  aside.collapsed .nav-badge {
    position: static; min-width: 20px; height: 20px; padding: 0 6px; font-size: var(--text-xs);
    margin-left: auto;
  }
  .sidebar-collapse-btn { display: none; }   /* モバイルでは折りたたみボタン不要 */
}

/* 営業時間の時:分セレクト（月〜日×開始/終了/休憩=28個）。共通input/selectの
   padding:10px 14px のままだと52px幅では矢印アイコンに文字が押されて見切れる
   （「00」が「0」だけ見える等）。幅を広げ、padding を専用に縮小して収める */
.time-split-select { width: auto; min-width: 62px; padding: 8px 6px; flex: none; }
/* 「時:分」select2つを折返し単位として扱う（〜の前後で改行しても片方だけ
   孤立した数字が浮かないよう、時と分は必ず一緒に折り返す） */
.hours-time-pair { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* 一斉配信の絞り込み（最終予約○日以上／予約回数○回以上・以下）3項目グリッド */
.bc-filter-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); }

/* テーブル: セルの1文字縦折れをやめ、横スクロール（.table-container の overflow-x）で見る。
   サイドバー260px固定はタブレット幅(600-900px)でも解除されない＝実効幅が狭いのは
   スマホと同じため、600pxではなく900pxで発火させる（2026-07-16） */
@media (max-width: 900px) {
  .table-container th,
  .table-container td { white-space: nowrap; }
}

/* ============ スマホ幅の最低限の閲覧性（2026-07-04） ============ */
@media (max-width: 600px) {
  /* ダッシュボード統計カード: 200px下限だと1列縦積み6枚で冗長。2列固定+縮小で密度を上げる */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 14px 12px; }
  .stat-label { font-size: var(--text-xs); margin-bottom: 4px; }
  /* .stat-value の font-size は clamp() で連続対応済み(上部定義) */

  /* 予約一覧の検索・絞り込みバー: 検索欄+2つのセレクト+CSV出力+更新が
     1行に収まらず右端が見切れていた。縦積み＋折返しで全部読める形にする。
     select は flex:1 だとCSV出力等の長いボタンに幅を奪われ「すべての日」が
     読めなくなるため、最低幅を確保して詰まりすぎないようにする */
  .table-controls { flex-wrap: wrap; }
  .search-box { max-width: none; flex-basis: 100%; }
  .filter-group { flex-wrap: wrap; flex: 1; }
  .filter-group select { flex: 1 1 auto; min-width: 110px; }

  /* 最優先サマリー帯のスマホ縦積みは shared.css に統合済み */

  /* 一斉配信の絞り込み: 3カラムのままだとラベルが1文字ずつ縦折れして窮屈。1カラム縦積みに */
  .bc-filter-grid { grid-template-columns: 1fr; }

  /* 営業時間の各曜日行: 「開始〜終了」ブロックが折返し無しの1行だったため
     375px幅でselect4個+コロン+チルダが収まらず右端が見切れていた。
     ブロック単体をwrapさせ、休憩ブロックは次の行に自然に落ちるようにする */
  .hours-time-block { flex-wrap: wrap; }
  .hours-row { gap: var(--space-2) var(--space-4); }

  /* メニュー追加/スタッフ追加/休み追加フォーム: 固定px幅の複数カラムグリッドが
     375px幅に収まらずラベル縦折れ・入力欄見切れを起こしていたため1カラム縦積みに。
     ボタンは auto 幅のままだと隣に潰れて見えるため全幅に広げる */
  .svc-form-grid,
  .staff-form-grid,
  .absence-form-grid {
    grid-template-columns: 1fr !important;
  }
  .svc-form-grid button,
  .staff-form-grid button,
  .absence-form-grid button {
    width: 100%;
  }

  /* FullCalendar: ツールバーが幅に収まらず崩れるため縮小して折返し許可 */
  #admin-calendar .fc-toolbar { flex-wrap: wrap; gap: 6px; }
  #admin-calendar .fc-toolbar-title { font-size: 17px; }
  #admin-calendar .fc-button { padding: 4px 8px; font-size: 12px; }
  /* 月表示のイベント行（●11時など）が nowrap のままだとセル幅を超えて
     隣のセルへ視覚的にはみ出す。折返し許可だと1文字ずつ縦折れて逆に読みにくい
     ため、Biz側のテーブル密集表示（biz.css）と同じ ellipsis 省略の型で収める */
  #admin-calendar .fc-daygrid-event {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
    font-size: 10px;
    line-height: 1.4;
    padding: 0 2px;
  }
  #admin-calendar .fc-daygrid-day-number { font-size: 12px; padding: 2px 4px; }
  /* イベント行の親（harness/day-events/day-frame）が overflow: visible のままだと
     子に max-width/ellipsis を付けても効かず境界を跨いで見切れる。ここで止める */
  #admin-calendar .fc-daygrid-day-events,
  #admin-calendar .fc-daygrid-event-harness { overflow: hidden; max-width: 100%; }

  /* LINEチャットボタン: 上部の店舗セレクタと重なるため右下フローティングへ
     （インラインstyleのtop/rightに勝つため !important） */
  #line-chat-button { top: auto !important; bottom: 16px !important; right: 16px !important; }
}