/* ====== 全体ベース ====== */

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(180deg, #f6f7fb 0%, #eef1f7 100%);
  color: #222;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(180deg, #f6f7fb 0%, #eef1f7 100%);
  color: #222;
}


.layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* ====== サイドバー ====== */

.sidebar {
  width: 248px;
  background: linear-gradient(180deg, #161827 0%, #1b1d31 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
  flex: 0 0 248px;
}

.sidebar-mobile-head {
  display: none;
}

.sidebar-header {
  margin-bottom: 24px;
}

.app-name {
  font-size: 14px;
  font-weight: 600;
  color: #9ca3ff;
  line-height: 1.4;
}

.salon-name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  margin-top: 4px;
}

.nav-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
  min-height: 0;
}

.nav-link {
  display: block;
  width: 100%;
  text-decoration: none;
  color: #ddd;
  background-color: transparent;
  font-size: 14px;
  line-height: 1.45;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
}

.nav-link:hover {
  background-color: #2a2a38;
  border-color: #44445a;
  color: #fff;
  cursor: pointer;
}

.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid #2e2e3e;
  padding-top: 16px;
  font-size: 12px;
  color: #aaa;
  flex-shrink: 0;
}

.logout-btn {
  width: 100%;
  background-color: #2f2f3f;
  border: 1px solid #4a4a66;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}
.logout-btn:hover {
  background-color: #44445e;
}

.login-meta {
  margin-top: 12px;
  line-height: 1.4;
  color: #aaa;
}
.login-role {
  color: #fff;
  font-weight: 500;
}

/* ====== メインエリア ====== */

.main-area {
  flex: 1;
  min-width: 0;
  padding: 24px;
  box-sizing: border-box;
}

/* カードを画面に合わせてもう少し大きくする */
.content-card {
  background-color: rgba(255,255,255,0.96);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.08),
    0 2px 6px rgba(15, 23, 42, 0.05);
  border-radius: 20px;
  padding: 24px;
  box-sizing: border-box;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  overflow-wrap: anywhere;
}

/* ====== テキスト系 ====== */

.page-title {
  font-size: 20px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 16px;
  color: #111;
}

.subinfo-row {
  font-size: 14px;
  margin-bottom: 4px;
  color: #444;
}

.section-block {
  margin-top: 24px;
  margin-bottom: 24px;
}

/* ====== テーブル ====== */

.table-basic {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  margin-bottom: 16px;
}

.table-basic th {
  background-color: #f2f2f7;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid #dcdce6;
  font-weight: 600;
  font-size: 13px;
  color: #333;
}

.table-basic td {
  background-color: #fff;
  padding: 8px 10px;
  border: 1px solid #dcdce6;
  vertical-align: top;
  color: #222;
  font-size: 13px;
  line-height: 1.5;
}

/* ====== ステータスチップ ====== */

.badge-status {
  display: inline-block;
  font-size: 12px;
  line-height: 1.2;
  padding: 4px 6px;
  border-radius: 4px;
  font-weight: 500;
  color: #fff;
}
.badge-pending {
  background-color: #d97706; /* オレンジ */
}
.badge-confirmed {
  background-color: #10b981; /* グリーン */
}
.badge-canceled {
  background-color: #ef4444; /* レッド */
}

/* ====== ボタン / リンク見た目統一 ====== */

/* メインアクション（緑とか青系） */
.btn-primary {
  appearance: none;
  border: 1px solid #2563eb;
  background-color: #2563eb;
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.btn-primary:hover {
  background-color: #1e4fd6;
  border-color: #1e4fd6;
}

/* サブアクション（グレー） */
.btn-secondary {
  appearance: none;
  border: 1px solid #cfd2dc;
  background-color: #fff;
  color: #111;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.btn-secondary:hover {
  background-color: #f2f3f7;
}

/* 危険操作（赤） */
.btn-danger {
  appearance: none;
  border: 1px solid #dc2626;
  background-color: #dc2626;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.btn-danger:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
}

/* テキストリンクをボタンっぽく */
.btn-link {
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  background-color: #fff;
  border: 1px solid #cfd2dc;
  color: #1f2937;
}
.btn-link:hover {
  background-color: #f2f3f7;
  text-decoration: none;
  color: #111;
}

/* 小さめリンクボタン（テーブル行の削除とか） */
.btn-small {
  font-size: 12px;
  padding: 4px 8px;
  line-height: 1.2;
  border-radius: 4px;
}

/* ログイン画面用の専用ラッパ */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  background-color: #f5f6fa;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 24px;
}

.login-card {
  background-color: #fff;
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.08),
    0 2px 4px rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  width: 100%;
  max-width: 360px;
  padding: 24px;
  box-sizing: border-box;
  color: #111;
}

.login-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: #111;
}

.form-field {
  font-size: 14px;
  margin-bottom: 16px;
}

.form-field label {
  display: block;
  margin-bottom: 4px;
  color: #444;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
}

.form-field input {
  width: 100%;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #cfd2dc;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.3;
}

.form-field input:focus {
  outline: 2px solid #2563eb33;
  border-color: #2563eb;
}

/* サブリンク（オーナー専用の補助メニュー用） */
.nav-sublink {
  font-size: 12px;
  color: #a1a1aa;        /* ちょい薄いグレー */
  padding-left: 24px;    /* ちょい右に下げる */
  line-height: 1.4;
}

.nav-sublink:hover {
  color: #fff;           /* hover時は白くしてもいいし、好みで調整OK */
}

/* ===== 日別シフトグリッド ===== */

.day-board {
  display: flex;
  flex-direction: row;
  background-color: #ffffff;
  border: 1px solid #d7d7e0;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  min-height: 600px;
  position: relative;
  color: #1f1f2b;
  font-size: 13px;
  line-height: 1.3;
}

/* 左の時間軸 */
.time-axis {
  flex: 0 0 60px;
  border-right: 1px solid #e2e2ee;
  position: relative;
  height: 1200px; /* 24時間分の高さ。1h=50pxイメージ */
}

.hour-label {
  position: absolute;
  left: 0;
  font-size: 11px;
  color: #6a6a80;
  transform: translateY(-50%);
}

/* 右側のスタッフ列を横に並べる */
.staff-scroll {
  flex: 1 1 auto;
  overflow-x: auto;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-left: 16px;
}

/* スタッフ1人分の列 */
.staff-col {
  min-width: 180px;
  background-color: #fafafe;
  border: 1px solid #dedeea;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}

/* スタッフ名ヘッダ */
.staff-col-header {
  background-color: #f3f3ff;
  border-bottom: 1px solid #dedeea;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #1f1f2b;
}
.staff-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.1);
}
.staff-col-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 縦に24hぶんのエリア */
.staff-day-body {
  position: relative;
  height: 1200px; /* time-axis と同じ高さに合わせる */
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 49px,
    rgba(0,0,0,0.05) 50px
  );
  /* 1時間ごとに薄い線が入る感じ */
  font-size: 11px;
  color: #1f1f2b;
  overflow: hidden;
}

/* 1本のシフトブロック */
.shift-block {
  position: absolute;
  left: 8px;
  right: 8px;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  color: #fff;
  padding: 6px 8px 28px; /* 下にボタンを置くスペース */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* ブロック内テキスト */
.shift-block-inner {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  word-break: break-word;
}
.shift-time {
  font-feature-settings: "pnum";
}

/* 編集/削除ボタン */
.shift-edit-form,
.shift-delete-form {
  position: absolute;
  right: 4px;
  bottom: 4px;
  margin: 0;
}

.shift-delete-form {
  bottom: 4px;
  right: 48px; /* editと左右に並べる感じに */
}

.btn-mini {
  background-color: #ffffffcc;
  color: #1f1f2b;
  font-size: 10px;
  line-height: 1.2;
  padding: 2px 4px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.2);
  cursor: pointer;
}
.btn-mini.btn-danger {
  background-color: #fff0f0;
  color: #aa0000;
  border-color: rgba(170,0,0,0.4);
}
.btn-mini:hover {
  filter: brightness(0.95);
}

/* 汎用小さいボタン */
.btn {
  display:inline-block;
  border-radius:4px;
  border:1px solid #cfd0dc;
  padding:6px 10px;
  font-size:12px;
  font-weight:500;
  background-color:#fff;
  color:#1f1f2b;
  line-height:1.2;
  cursor:pointer;
  text-decoration:none;
}
.btn-outline {
  background-color:#fff;
}
.btn-ghost {
  background-color:#f9f9ff;
  border:1px solid transparent;
  color:#1f1f2b;
}
.btn:hover {
  background-color:#f3f3ff;
}

.page-title {
  font-size:1rem;
  font-weight:600;
  margin-bottom:0.5rem;
  color:#1f1f2b;
}

.color-dim {
  color:#6a6a80;
}

/* ====== シフト一覧カード (直近7日 / 直近30日) ====== */

:root{
  --hour-h: 50px;                 /* 1時間の高さ（好みで 40〜60） */
  --board-h: calc(24 * var(--hour-h));
  --card-w: 520px;                /* 1日カードの横幅（好みで） */
}

/* 横スクロールで日カードを並べるラッパ */
.shift-days-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 12px;
  border: 1px solid #d7d7e0;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

/* 1日ぶんの縦トラックカード */
.shift-day-card {
  flex: 0 0 200px;            /* 1日の横幅 */
  border: 1px solid #dedeea;
  border-radius: 6px;
  background-color: #fafafe;
  display: flex;
  flex-direction: column;
  color: #1f1f2b;
  font-size: 12px;
  line-height: 1.3;
}

/* カード上部 (日付ラベル) */
.shift-day-head {
  font-size: 12px;
  font-weight: 600;
  background-color: #f3f3ff;
  border-bottom: 1px solid #dedeea;
  padding: 6px 8px;
  color: #1f1f2b;
  white-space: nowrap;
}

/* カード中身 (00:00→24:00 の縦ライン) */
.shift-day-body {
  position: relative;
  height: 1200px;             /* 24hを縦に並べる高さ。1h≒50px */
  background-color: #fff;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}

/* 1時間ごとの水平ライン */
.shift-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0,0,0,0.05);
  /* top は inline-styleで%指定 */
}

/* それぞれの「00:00」「01:00」みたいなラベル */
.shift-hour-label {
  position: absolute;
  left: 4px;
  top: -7px;
  font-size: 10px;
  line-height: 1;
  color: #6a6a80;
  background: rgba(255,255,255,0.7);
  padding: 1px 2px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.04);
}

/* スタッフのシフトブロック（色つき） */
.shift-mini-block {
  position: absolute;
  left: 8px;
  right: 8px;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  color: #fff;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-size: 11px;
  line-height: 1.3;
  overflow: hidden;
  /* top と height は inline-styleで%指定 */
  /* background も inline-style でスタッフごとの色 */
}

.shift-mini-inner {
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

.shift-mini-staff {
  font-weight: 600;
  margin-bottom: 2px;
}

.shift-mini-time {
  font-feature-settings: "pnum";
  font-size: 11px;
}

/* --- Shifts: horizontal days / vertical staff, fixed height --- */
.week-wrap{
  display:flex; gap:16px;
  overflow-x:auto !important; overflow-y:hidden !important;
  padding:8px 4px 12px;
  scroll-snap-type:x proximity;
}
.day-card{
  background:#fff; border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  padding:8px 12px 16px;
}

.day-head{
  font-weight: 600;
  font-size: 14px;
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  position: sticky; top: 0; background: #fff; z-index: 2;
}

.day-grid{
  position: relative;
  height: 1440px;                /* 24h × 60px（必要なら好みで調整） */
}

.time-rail{
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 56px; border-right: 1px dashed #e6e6e6;
}
.time-rail .tick{
  position: absolute; left: 0; width: 100%; height: 60px;
  border-bottom: 1px dashed #eee;
}
.time-rail .tick span{
  position: absolute; left: 6px; top: -8px;
  font-size: 11px; color: #999; background: #fff; padding: 0 2px;
}

.lanes{
  margin-left: 56px;             /* 時間軸ぶんの余白 */
  height: 100%;
  display: flex; flex-direction: column; gap: 10px;
  padding: 8px 10px 12px;
}

.lane-title{
  font-size: 12px; color: #666;
  margin: 2px 0 4px;
  display: flex; align-items: center; gap: 6px;
}
.lane-title .dot{ width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.lane-body{
  position: relative;
  height: calc(100% - 18px);     /* タイトル分を引く */
  border: 1px solid #f0f0f0; border-radius: 8px;
  background: repeating-linear-gradient(
    to bottom, transparent, transparent 59px, rgba(0,0,0,0.03) 60px
  );                              /* 1hごとの薄い罫線 */
}

.shift-block{
  position: absolute; left: 6px; right: 6px;   /* 各スタッフ列内でバーは重ならない */
  border-radius: 8px; opacity: .92; color: #fff;
  padding: 4px 6px; box-shadow: 0 1px 2px rgba(0,0,0,.10);
}
.shift-block .label{ font-size: 12px; font-weight: 600; text-shadow: 0 1px 0 rgba(0,0,0,.15); }

.actions-row{ margin-top:14px; display:flex; gap:10px; }
.btn{ display:inline-block; padding:8px 12px; border:1px solid #dfe5ea; border-radius:8px; background:#fff; }
.btn.primary{ background:#2f6cf6; color:#fff; border-color:#2f6cf6; }
.muted{ color:#8d96a0; margin-bottom:8px; }

.lanes { display: grid; gap: 12px; }
.lane-body { position: relative; height: 1440px; } /* 24h * 60min 前提のレール */
.shift-block { position: absolute; left: 8px; right: 8px; border-radius: 8px; color: #fff; padding: 6px 8px; box-sizing: border-box; }
.time-rail .tick { height: 60px; } /* 1時間＝60px の例。あなたの既存値に合わせてOK */

/* 24時間分の高さを確保（だいたい 1200px = 1時間あたり50px の目安） */
.time-rail { position: relative; height: 1200px; }
.lane-body { position: relative; height: 1200px; }

.day-board{display:grid !important;grid-template-columns:72px 1fr;gap:16px;position:relative !important;height:1200px}
.time-axis{position:relative}
.hour-label{position:absolute !important;left:8px;transform:translateY(-50%);font-size:12px;color:#7a7a7a}
.staff-scroll{overflow-x:auto}
.staff-col{display:inline-block;vertical-align:top;width:260px;margin-right:12px}
.staff-col-header{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.staff-color-dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.staff-day-body{position:relative !important;height:100%;
  background:repeating-linear-gradient(to bottom, transparent,
    transparent calc(100%/24 - 1px), rgba(0,0,0,.04) calc(100%/24))}
.shift-block{position:absolute !important;left:6px;right:6px;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.12);color:#fff}
.shift-block-inner{padding:6px 8px;font-size:12px;line-height:1.2}
.btn-mini{font-size:11px;padding:2px 6px;border-radius:6px;background:#fff;color:#555;margin:4px;display:inline-block}
.btn-danger{background:#fff;color:#b00020;border:1px solid #b00020}

/* 7日/30日ビューのレイアウト */
.week-wrap {
  display: grid;
  gap: 16px;
}

/* 1日カード */
day-card
/* ===== 横並びレイアウト & 上部固定ツールバー ===== */
.calendar-toolbar{
  position: sticky; top: 0; z-index: 20;
  background: #fff; padding: 8px 0 12px; border-bottom: 1px solid #eee;
}

/* 日カードを横に並べて、横スクロール */
.week-row{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 2px 14px;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.week-row .day-card{
  flex: 0 0 auto;             /* 折り返さない */
  min-width: 520px;           /* 1日の横幅（スタッフ数に応じて調整可） */
  scroll-snap-align: start;
}

/* ===== 横スクロール週ビュー 強制レイアウト ===== */

/* 日カードを横一列に並べて、横スクロールにする */
.week-wrap{
  display:flex; gap:16px;
  overflow-x:auto !important; overflow-y:hidden !important;
  padding:8px 4px 12px;
  scroll-snap-type:x proximity;
}
.week-wrap > .day-card{
  flex:0 0 var(--card-w);
  min-width:var(--card-w); max-width:var(--card-w);
  scroll-snap-align:start;
}

/* グリッド全体の高さを固定（ページ全体が縦に伸びすぎない） */
.day-card .day-grid{
  display: grid;
  grid-template-columns: 56px 1fr; /* 左：時間軸、右：レーン */
  gap: 12px;
  height: var(--board-h);
}

/* 時間軸とレーンのボディも同じ高さに揃える */
.time-rail{ position: relative; height: var(--board-h); }
.lane-body{ position: relative; height: var(--board-h); overflow: hidden; }

/* 時刻目盛（24分割） */
.time-rail .tick{
  position: relative;
  height: calc(100% / 24);
  border-top: 1px dashed #e5e7eb;
}
.time-rail .tick span{
  position: absolute; top: -0.7em; left: 0;
  font-size: 12px; color: #9ca3af;
}

/* カードの見た目まわり（必要なら） */
.lane-title{ display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dot{ width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.shift-block{
  position: absolute; left: 8px; right: 8px;
  border-radius: 6px; color:#fff; padding: 6px 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.07);
}
.shift-block .label{ font-size: 12px; line-height: 1.2; }

/* 週/30日ビューの空白対策：ラッパーを内容幅に合わせる */
.week-wrap{ width:max-content !important; }
.week-wrap .day-card{ min-width:360px; } /* 同じ値を shifts.html と合わせる */

/* もし既存CSSに min-width:1400px 等があれば無効化されるよう !important を付与 */

/* ====== Shifts weekly view hotfix (最小限の上書き) ====== */
:root{
  --board-h: 1200px;  /* 24hの縦高さ */
  --card-w: 520px;    /* 1日カードの横幅（必要なら600pxなどに調整） */
}

/* 1日カードを横一列に＆必要ぶんだけ横スクロール */
.week-wrap{
  display: flex !important;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 4px 12px;
  scroll-snap-type: x proximity;
  width: max-content !important; /* 余計な右の空白を作らない */
}
.week-wrap > .day-card{
  flex: 0 0 var(--card-w);
  min-width: var(--card-w);
  max-width: var(--card-w);
  scroll-snap-align: start;
}

/* 左：時間軸 + 右：レーンの2カラム。高さは24hで固定 */
.day-card .day-grid{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  height: var(--board-h);
}
.time-rail{ position: relative; height: var(--board-h); }
.lane-body{ position: relative; height: var(--board-h); overflow: hidden; }

/* スタッフの列を横方向に並べる（列数は自動） */
.lanes{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: 12px;
  min-width: 360px; /* 狭すぎる崩れ防止の下限だけ与える */
}

/* ===== Shifts weekly view – minimal hotfix ===== */
:root{
  /* 24hの縦の高さと、1日カードの横幅だけ“つまみ”で調整できます */
  --board-h: 1200px;   /* 24hの高さ。900〜1400pxあたりで好みで調整OK */
  --card-w: 520px;     /* 1日カード幅。520→600pxなどにすると横が広がる */
}


.week-wrap{
  display: flex !important;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 4px 12px;
  width: max-content !important;      /* 中身のぶんだけ横幅にして余白を出さない */
}
.week-wrap > .day-card{
  flex: 0 0 var(--card-w);
  min-width: var(--card-w);
  max-width: var(--card-w);
}


.day-card .day-grid{
  display: grid !important;
  grid-template-columns: 56px 1fr !important;
  gap: 12px;
  height: var(--board-h) !important;
}
.time-rail{
  position: relative !important;
  height: var(--board-h) !important;
  z-index: 0 !important;              /* 目盛りは一番下に */
}
.time-rail .tick{
  position: relative;
  height: calc(var(--board-h) / 24);
  border-top: 1px dashed #e5e7eb;
}
.time-rail .tick span{
  position: absolute;
  top: -8px;
  left: 4px;
  font-size: 12px;
  color: #6b7280;
  background: #fff;                   /* 目盛り数字の裏に白を敷いて読みやすく */
}


.lanes{
  display: grid !important;
  grid-auto-flow: column !important;         /* ← ここが肝：横に増える */
  grid-auto-columns: minmax(200px, 1fr) !important;
  column-gap: 12px;
}
.lane-body{
  position: relative !important;
  height: var(--board-h) !important;
  overflow: hidden;                           /* 24h外のはみ出しをカット */
  margin-left: 0 !important;                  /* 負のマージン等があっても打ち消す */
}


.lane-body .shift-block{
  position: absolute !important;
  left: 0 !important;                          /* 時間軸カラムへはみ出さない */
  right: 0 !important;
  width: auto !important;
  z-index: 2 !important;                       /* 目盛りより前面 */
}

/* ===== Shifts weekly view – 最小限の安定化上書き ===== */
:root{
  /* 24時間の縦高さ＆1日カードの横幅。数値だけ好みで微調整OK */
  --board-h: 1200px;   /* 900〜1400pxあたりで調整可 */
  --card-w: 520px;     /* 480〜600pxあたりで調整可 */
}


.week-wrap{
  display: flex !important;
  gap: 16px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 8px 4px 12px !important;
}
.week-wrap > .day-card{
  flex: 0 0 var(--card-w) !important;
  min-width: var(--card-w) !important;
  max-width: var(--card-w) !important;
  overflow: hidden;            /* カード外にはみ出さない */
}


.day-card .day-grid{
  display: grid !important;
  grid-template-columns: 56px 1fr !important;
  gap: 12px !important;
  height: var(--board-h) !important;
}
.time-rail{
  position: relative !important;
  height: var(--board-h) !important;
  z-index: 0 !important;
}
.time-rail .tick{
  position: relative !important;
  height: calc(var(--board-h) / 24) !important;
  border-top: 1px dashed #e5e7eb !important;
}
.time-rail .tick span{
  position: absolute !important;
  top: -8px; left: 4px;
  font-size: 12px; color: #6b7280;
  background: #fff;
}


.lanes{
  display: grid !important;
  grid-auto-flow: column !important;          /* ← 横に増えるのがポイント */
  grid-auto-columns: minmax(200px, 1fr) !important;
  column-gap: 12px !important;
  min-width: 360px;                            /* 極端に狭い崩れ防止 */
}
.lane-body{
  position: relative !important;
  height: var(--board-h) !important;
  overflow: hidden !important;                 /* 24h外のはみ出しをカット */
  margin-left: 0 !important;
}


.lane-body .shift-block{
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  width: auto !important;
  box-sizing: border-box !important;
  z-index: 2 !important;                       /* 目盛りより前面 */
}

/* ==== Shifts: 横スクロール復活 & 右側はみ出し防止（最小限の上書き） ==== */


.week-wrap{
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-gutter: stable both-edges;   /* スクロールバーの高さ分を確保 */
  padding-bottom: 6px;                   /* バーが隠れないよう少しだけ下余白 */
}


.card, .card-body, .page-content, .day-board, .cal-wrap, .calendar-wrap{
  overflow: visible !important;
}


.week-wrap > .day-card{
  overflow: hidden !important;     /* カード外へはみ出さない */
  border-radius: 12px;             /* 任意：見た目キレイに */
}


.lane-body{
  overflow: hidden !important;     /* 24h外のブロックを隠す */
}

/* ==== 日ごとのスクロールを有効化（最小限追記） ==== */

/* 24hを中でスクロールできるように：縦 */
.lane-body{
  overflow-y: auto !important;      /* ← ここを auto にする（前の hidden 上書き） */
  overscroll-behavior: contain;
}

/* スタッフ列が多い日のために：横（スタッフ方向） */
.lanes{
  overflow-x: auto;                  /* ← スタッフ横スクロール */
  overflow-y: hidden;
  gap: 12px;                         /* 列の間の余白（任意） */
}

/* 見た目の微調整（スクロールバーの分の余白） */

.lanes::-webkit-scrollbar{ height: 8px; }

/* ==== Shifts weekly view: minimal, fixed 24h & safe layout (append only) ==== */
:root{
  --hour-h: 50px;                 /* 1時間の高さ（40〜60で好み調整） */
  --board-h: calc(24 * var(--hour-h)); /* 24hの縦高さを固定 */
  --card-w: 520px;                /* 1日カードの幅（必要なら 600 等） */
}

/* 日カードを横一列に並べ、必要分だけ横スクロール */
.week-wrap{
  display: flex !important;
  gap: 16px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 8px 4px 12px !important;
}
.week-wrap > .day-card{
  flex: 0 0 var(--card-w) !important;
  min-width: var(--card-w) !important;
  max-width: var(--card-w) !important;
  overflow: hidden !important;         /* カード外へのはみ出しをカット */
  border-radius: 12px;                 /* 見た目 */
}

/* 左：時間軸56px / 右：レーン群。高さは24h固定で“台”からはみ出さない */
.day-card .day-grid{
  display: grid !important;
  grid-template-columns: 56px 1fr !important;
  gap: 12px !important;
  height: var(--board-h) !important;
}
.time-rail{
  position: relative !important;
  height: var(--board-h) !important;
  z-index: 0 !important;
}
.time-rail .tick{
  position: relative !important;
  height: calc(var(--board-h) / 24) !important;
  border-top: 1px dashed #e5e7eb !important;
}
.time-rail .tick span{
  position: absolute !important;
  top: -8px; left: 4px;
  font-size: 12px; color: #6b7280;
  background: #fff;
}

/* スタッフ列は“横方向”に増やす。各レーンは独立した縦ストリップ */
.lanes{
  display: grid !important;
  grid-auto-flow: column !important;          /* 横に増えるのがポイント */
  grid-auto-columns: minmax(200px, 1fr) !important;
  column-gap: 12px !important;
  min-width: 360px;                            /* 極端に狭い崩れ防止 */
  overflow-x: auto;                            /* レーン数が多い日は横スクロール可 */
  overflow-y: hidden;
}

/* 24hの中で完結。時間軸側やカード外に漏れない */
.lane-body{
  position: relative !important;
  height: var(--board-h) !important;
  overflow: hidden !important;
  margin-left: 0 !important;
}
.lane-body .shift-block{
  position: absolute !important;
  left: 8px !important; right: 8px !important;
  width: auto !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
}

/* 横スクロールバーが隠れないよう少しだけ下余白 */


/* ==== Shifts weekly view: 最小限オーバーライド（末尾に追記） ==== */
:root{
  --hour-h: 50px;                       /* 1時間の高さ（40〜60で調整可） */
  --board-h: calc(24 * var(--hour-h));  /* 00:00〜24:00 を常に全部見せる */
  --card-w: 520px;                      /* 1日カードの横幅（必要なら600等） */
}


.week-wrap{
  display: flex !important;
  gap: 16px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 8px 4px 12px !important;
  max-width: 100% !important;
}
.week-wrap > .day-card{
  flex: 0 0 var(--card-w) !important;
  min-width: var(--card-w) !important;
  max-width: var(--card-w) !important;
  overflow: hidden !important;          /* カード外へのはみ出しをカット */
  border-radius: 12px;
}


.day-card .day-grid{
  display: grid !important;
  grid-template-columns: 56px 1fr !important;
  gap: 12px !important;
  height: var(--board-h) !important;    /* ← これで 0:00〜24:00 を一枚に固定表示 */
}
.time-rail{
  position: relative !important;
  height: var(--board-h) !important;
  z-index: 0 !important;
}
.time-rail .tick{
  position: relative !important;
  height: calc(var(--board-h) / 24) !important;
  border-top: 1px dashed #e5e7eb !important;
}
.time-rail .tick span{
  position: absolute !important;
  top: -8px; left: 4px;
  font-size: 12px; color: #6b7280;
  background: #fff;
}


.lanes{
  display: grid !important;
  grid-auto-flow: column !important;          /* 横方向に列を増やすのが肝 */
  grid-auto-columns: minmax(200px, 1fr) !important;
  column-gap: 12px !important;
  overflow-x: auto !important;                /* ← 日ごとの横スクロール */
  overflow-y: hidden !important;
}


.lane-body{
  position: relative !important;
  height: var(--board-h) !important;
  overflow: hidden !important;                /* 24h外のブロックを隠す */
  margin-left: 0 !important;
}
.lane-body .shift-block{
  position: absolute !important;
  left: 8px !important; right: 8px !important;
  width: auto !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
}

:root {
  --hour-h: 30px;
  --board-h: calc(24 * var(--hour-h));
}

/* 日カードの中を 〔左:時間軸 右:レーン群〕の2カラムにして高さ固定 */
.week-wrap .day-card .day-grid{
  position: relative !important;
  display: grid !important;
  grid-template-columns: 56px 1fr !important;
  gap: 12px !important;
  height: var(--board-h) !important;     /* 24h固定で縦スクロール不要 */
}

/* 左の時間レール（既存の tick の top:% を親高に対して計算させる） */
.week-wrap .day-card .time-rail{
  position: relative !important;
  height: var(--board-h) !important;
}
.week-wrap .day-card .time-rail .tick{
  position: absolute !important;
  left: 0; width: 100%;
  border-bottom: 1px dashed #e5e7eb;
}
.week-wrap .day-card .time-rail .tick span{
  position: absolute; left: 6px; top: -8px;
  font-size: 12px; color: #6b7280; background:#fff; padding:0 2px;
}

/* レーン群を“横に増えるグリッド”に。固定幅220px×列数 → はみ出しは横スクロール */
.week-wrap .day-card .lanes{
  position: relative;
  height: 100% !important;
  margin-left: 0 !important;             /* 時間軸は grid の左カラムで確保 */
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 220px !important;   /* ← 固定幅。列が多ければ幅が増える */
  column-gap: 12px !important;
  max-width: 100% !important;            /* 親カラム幅に収める */
  overflow-x: auto !important;           /* ← 日ごとの横スクロール */
  overflow-y: hidden !important;
}

/* 各レーンの“台座”。24h分の高さを固定し、ブロックを絶対配置で載せる */
.week-wrap .day-card .lane-body{
  position: relative !important;
  height: var(--board-h) !important;
  border: 1px solid #f0f0f0; border-radius: 8px;
  background: repeating-linear-gradient(
    to bottom, transparent, transparent calc(var(--hour-h) - 1px), rgba(0,0,0,0.03) var(--hour-h)
  );
  overflow: hidden !important;           /* ← 縦スクロールは出さない */
}

/* シフトブロック：既存の top:% / height:% をそのまま利用（親高に対して） */
.week-wrap .day-card .lane-body .shift-block{
  position: absolute !important;
  left: 8px; right: 8px; width: auto; box-sizing: border-box;
  border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.12);
  display: flex; flex-direction: column; justify-content: flex-start;
  z-index: 1;
}

/* スクロールバーの高さ（見やすく） */
.week-wrap .day-card .lanes::-webkit-scrollbar{ height: 8px; }

/* === Shifts: per-day horizontal scroll — min-width fix =====================
   Grid/Flex あるある対策：右カラム(= .lanes を含む)が「内容幅に引っ張られて」
   1fr トラック自体が広がるのを防ぐ。min-width:0 と minmax(0,1fr) を指定。
============================================================================= */
.week-wrap .day-card .day-grid{
  grid-template-columns: 56px minmax(0, 1fr) !important;
}
.week-wrap .day-card .day-grid > .lanes{
  min-width: 0 !important;      /* ← これが無いと overflow が発火しないことがある */
  width: 100% !important;
}

/* 念のため：横スクロールの本体指定 */
.week-wrap .day-card .lanes{
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 220px !important;
  grid-template-columns: unset !important;
  column-gap: 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* === Shifts: 日ごとの横スクロール 強制（ページ限定・最小） === */
.week-wrap > .day-card > .day-grid{
  /* 右カラムが中身に引っ張られて広がらないようにするのが肝 */
  grid-template-columns: 56px minmax(0, 1fr) !important;
}
.week-wrap > .day-card > .day-grid > .lanes{
  /* 列は“横に増える”。1列=220px固定 → 多い日ははみ出す → 横バー */
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 220px !important;
  grid-template-columns: unset !important; /* 念のため、他の指定を打ち消す */
  column-gap: 12px !important;

  /* “はみ出しをはみ出しとして扱う”ためのおまじない */
  min-width: 0 !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* スクロールバーが隠れないよう少し余白 */
.week-wrap > .day-card .day-grid { padding-bottom: 6px; }

/* per-day horizontal staff scroll (final) */
.week-wrap > .day-card > .day-grid{
  grid-template-columns: 56px minmax(0, 1fr) !important;
}
.week-wrap > .day-card > .day-grid > .lanes{
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 220px !important;
  grid-template-columns: unset !important;
  column-gap: 12px !important;

  min-width: 0 !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}
.week-wrap > .day-card .day-grid{ padding-bottom: 6px; }

/* === Shifts: 日ごとの横スクロール（カード内のみ・最小） ================= */

/* 左=時間軸(56px) / 右=レーン群(伸縮) に固定。右カラムが中身で広がらないよう minmax(0,1fr) */
.week-wrap > .day-card > .day-grid{
  grid-template-columns: 56px minmax(0, 1fr) !important;
  padding-bottom: 6px; /* スクロールバーが隠れないよう少し余白 */
}

/* レーン群：列は“横に増える”。1列=220px固定→多い日ははみ出して横バーが出る */
.week-wrap > .day-card > .day-grid > .lanes{
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 220px !important;   /* 列幅。必要なら 240/260 に調整 */
  grid-template-columns: unset !important; /* 念のため、他の指定やinlineを打ち消す */
  column-gap: 12px !important;

  /* “はみ出しをはみ出しとして扱う”ためのおまじない（超重要） */
  min-width: 0 !important;
  width: 100% !important;
  overflow-x: auto !important;           /* ← ここでカード内に横スクロール */
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* === FINAL: 日ごとのスタッフ横スクロール（カード内だけ／最小副作用） === */

/* 左=時間軸56px・右=レーン群。右カラムが中身で広がらないよう minmax(0,1fr) */
.week-wrap > .day-card > .day-grid{
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding-bottom: 6px; /* バーが隠れないよう少しだけ余白 */
}

/* レーン群：列は“横に増える”。1列=220px固定 → 多い日ははみ出す → 横バー */
.week-wrap > .day-card > .day-grid > .lanes{
  display: grid !important;
  grid-auto-flow: column !important;     /* ← 横方向に列を増やす */
  grid-auto-columns: 220px !important;   /* 1列の幅（好みで 240/260） */
  grid-template-columns: unset !important; /* 既存/inlineの列定義を無効化 */
  column-gap: 12px !important;

  min-width: 0 !important;               /* “はみ出し”を正しく発生させる鍵 */
  width: 100% !important;
  overflow-x: auto !important;           /* ← 日カード内に横スクロールを出す */
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* 各レーンの台座（24h）— 縦スクロールは出さず、ブロックだけ動かす */
.week-wrap > .day-card .lane-body{
  position: relative !important;
  height: var(--board-h) !important;     /* 0:00〜24:00固定の台 */
  overflow: hidden !important;
}

/* 既存と重複しがちな“横を殺す”指定を安全に打ち消す（この範囲だけ） */
.week-wrap > .day-card .lanes{
  margin-left: 0 !important;             /* 古い余白ルールの打消し */
}

.content-card, .week-wrap { overflow-x: visible !important; }

/* 親では横スクロールを出さない */
.content-card,
.week-wrap { overflow-x: visible !important; }

/* 「日カード内」にだけ横スクロールを出す（最終版） */
.week-wrap > .day-card > .day-grid{
  grid-template-columns: 56px minmax(0, 1fr) !important;
  padding-bottom: 6px;
}
.week-wrap > .day-card > .day-grid > .lanes{
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 220px !important;    /* ←列幅。必要なら 240/260 */
  grid-template-columns: unset !important;
  column-gap: 12px !important;
  min-width: 0 !important; width: 100% !important;
  overflow-x: auto !important; overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* — 見える化＆常時スペース確保 — */
.week-wrap > .day-card > .day-grid > .lanes{
  overflow-x: auto !important;
  overflow-y: hidden !important;
  min-width: 0 !important;
  width: 100% !important;
  scrollbar-gutter: stable;              /* スクロール有無に関わらず高さ確保（Chromium/FF） */
}

/* Chromium系（Edge/Chrome） */
.week-wrap > .day-card > .day-grid > .lanes::-webkit-scrollbar{
  height: 10px;                          /* ← 太さ */
}
.week-wrap > .day-card > .day-grid > .lanes::-webkit-scrollbar-track{
  background: #eef2ff;                   /* トラック色（薄い） */
  border-radius: 8px;
}
.week-wrap > .day-card > .day-grid > .lanes::-webkit-scrollbar-thumb{
  background: #94a3b8;                   /* つまみ色（見やすいグレー） */
  border-radius: 8px;
}
.week-wrap > .day-card > .day-grid > .lanes::-webkit-scrollbar-thumb:hover{
  background: #64748b;
}

/* Firefox */
.week-wrap > .day-card > .day-grid > .lanes{
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #eef2ff;      /* thumb / track */
}

/* バーが隠れないよう少しだけ底上げ */
.week-wrap > .day-card > .day-grid { padding-bottom: 8px; }

/* 右端にスクロールヒント（常時表示） */
.week-wrap > .day-card > .day-grid > .lanes{
  position: relative;
}
.week-wrap > .day-card > .day-grid > .lanes::after{
  content:"";
  position:absolute; top:0; right:0; bottom:10px; width:24px;
  pointer-events:none;
  background: linear-gradient(to left, rgba(0,0,0,.06), rgba(0,0,0,0));
  border-bottom-left-radius: 10px;
}

/* ==== Day view only: split-columns need right:auto to avoid 1px overflow ==== */
.day-board .lane-body .shift-block{
  right: auto !important;
  width: auto !important;
}
/* 保険：スクロールの右端を僅かに内側にしてオーバーフロー抑制 */
.day-board .lanes{ box-sizing: border-box; padding-right: 8px; }

/* Day view only: split columns */
.day-board .lane-body .shift-block{
  right: auto !important;     /* 列割り付けの width/left を生かす */
  width: auto !important;
}
.day-board .lanes{ box-sizing:border-box; padding-right:8px; }

/* 選択中のシフトブロック（Deleteの対象が分かるように） */
.shift-block.is-selected{
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 1px;
}

/* ダブルクリックできる雰囲気 */
.shift-block{ cursor: pointer; }

.nav-section-title {
  margin: 16px 0 4px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.6;
}
.nav-sublink {
  padding-left: 28px; /* ちょっとインデント */

<style>
/* —— バッジ色 —— */
.badge-pending{ background:#f1c40f; color:#111; }
.badge-cancelreq{ background:#e74c3c; }
.badge-confirmed{ background:#2ecc71; }
.badge-canceled{ background:#95a5a6; }

/* —— セクション見出し行（テーブル内の“区切り帯”）—— */
.table-section {
  background: linear-gradient(90deg,#f8fafc,#eef2ff);
  font-weight:600;
  color:#374151;
  border-top:1px solid #e5e7eb;
  border-bottom:1px solid #e5e7eb;
}
.table-section .label{
  display:inline-block; padding:4px 10px; border-radius:9999px;
  background:#e0e7ff; font-size:12px; margin-right:6px;
}

/* —— 行のニュアンス —— */
tr.status-cancel_requested{ background:#fff5f5; }
tr.status-canceled{ color:#9aa0a6; }

/* —— テーブルの“しっとり”感 —— */
.table thead th{ background:#f8fafc; position:sticky; top:0; z-index:1; }
.table-hover tbody tr:hover{ background:#f6f9ff; }

/* メモ欄は1行トリム */
td.memo{ max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
</style>

}

/* ==== 予約作成 / 編集フォーム用 =================================== */

.appointment-form-card {
  max-width: 720px;
  margin: 0 auto;
  border-radius: 14px;
  border: 1px solid #e2e6f0;
}

.appointment-form-card .card-body {
  padding: 28px 32px;
}

.appointment-form-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 18px;
}

.appointment-form-subtext {
  font-size: 12px;
  color: #6c757d;
}

.appointment-form label.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.appointment-form .form-control,
.appointment-form .form-select {
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #cfd7e6;
}

.appointment-form .form-control:focus,
.appointment-form .form-select:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 2px rgba(13, 110, 253, .15);
}

/* 顧客検索結果リスト */
.client-search-results {
  margin-top: 4px;
  border-radius: 8px;
  border: 1px solid #dde3f0;
  background: #ffffff;
}

.client-search-item {
  font-size: 13px;
  padding: 6px 10px;
  border-bottom: 1px solid #f1f3f8;
  cursor: pointer;
}

.client-search-item:last-child {
  border-bottom: none;
}

.client-search-item:hover {
  background: #f0f6ff;
}

.client-search-item small {
  color: #6c757d;
}

/* ボタン回り */
.appointment-form-actions .btn {
  min-width: 120px;
}

.appointment-form-actions .btn-primary {
  background: #0d6efd;
  border-color: #0d6efd;
}

.appointment-form-actions .btn-outline-secondary {
  border-color: #ced4da;
  color: #495057;
}

.appointment-form-actions .btn-outline-secondary:hover {
  background: #f1f3f5;
}

/* 警告・エラー */
.appointment-form .alert {
  border-radius: 8px;
  font-size: 13px;
}

/* 顧客検索：結果があるときだけ枠線＆影を出す */
.client-search-results {
  margin-top: 4px;
  border-radius: 8px;
  background: #ffffff;
  max-height: 220px;
  overflow-y: auto;
}

/* 中身が空なら線も影も消す */
.client-search-results:empty {
  border: none;
  box-shadow: none;
  padding: 0;
}

/* 1件以上あるときだけ枠線と影を表示 */
.client-search-results:not(:empty) {
  border: 1px solid #dde3f0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

/* 予約フォームのメインボタンを白文字に */
.appointment-form-actions .btn-primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #ffffff !important;
}

/* ===== Remind Settings page only ================================== */
.remind-page {
  --rem-font: 16px;           /* ベース文字 */
  --rem-label: 13.5px;        /* ラベル文字 */
  --rem-gap: 12px;            /* 行間の基本余白 */
  --rem-accent: #2563eb;      /* 既存のプライマリ色に合わせる */
  --rem-muted: #6a6a80;       /* 既存の落ち着いたグレー系 */
}

/* カード幅を少し広め＆内側余白をゆったり */
.remind-page .card,
.remind-page {
  max-width: 960px;
}

.remind-page .section-block { margin: 20px 0; }

/* 見出し（ページ内h5/h6等のサイズを底上げ） */
.remind-page h2, .remind-page h3, .remind-page h4,
.remind-page h5, .remind-page h6 {
  margin: 10px 0 8px;
  color: #111;
}
.remind-page h5 { font-size: 18px; }

/* ラベルと説明 */
.remind-page label,
.remind-page .form-label {
  font-size: var(--rem-label);
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}
.remind-page .hint, .remind-page .text-muted { color: var(--rem-muted); }

/* 入力類（input/select/textarea）を大きめ＆フォーカス色は既存青 */
.remind-page input[type="text"],
.remind-page input[type="number"],
.remind-page input[type="url"],
.remind-page input[type="date"],
.remind-page input[type="time"],
.remind-page select,
.remind-page textarea {
  font-size: var(--rem-font);
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #cfd2dc;
  width: 100%;
  box-sizing: border-box;
}

.remind-page textarea {
  min-height: 120px;            /* テンプレは少し広め */
  resize: vertical;
}

.remind-page input:focus,
.remind-page select:focus,
.remind-page textarea:focus {
  outline: 2px solid color-mix(in oklab, var(--rem-accent) 30%, transparent);
  border-color: var(--rem-accent);
}

/* 2カラム並びを作りたい行（必要な箇所に .kv-row を付けて使える） */
.remind-page .kv-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: var(--rem-gap);
}
@media (max-width: 760px){
  .remind-page .kv-row { grid-template-columns: 1fr; }
}

/* 送信/プレビュー系のボタン（既存の色に揃えて少し大きめ） */
.remind-page .btn-primary,
.remind-page .btn-save,
.remind-page .btn-preview {
  border: 1px solid var(--rem-accent);
  background: var(--rem-accent);
  color: #fff;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.1;
  border-radius: 8px;
  cursor: pointer;
}
.remind-page .btn-primary:hover,
.remind-page .btn-save:hover,
.remind-page .btn-preview:hover {
  filter: brightness(0.96);
}

/* セカンダリ・リンク風ボタン（既存グレー系） */
.remind-page .btn-secondary {
  border: 1px solid #cfd2dc;
  background: #fff;
  color: #111;
  padding: 10px 14px;
  font-size: 15px;
  border-radius: 8px;
}
.remind-page .btn-secondary:hover { background: #f2f3f7; }

/* 簡易バッジ（見出し横に“PRO”など付ける場合） */
.remind-page .badge {
  display: inline-block;
  font-size: 12px;
  border-radius: 9999px;
  padding: 3px 8px;
  background: #e0e7ff;
  color: #374151;
  vertical-align: middle;
  margin-left: 8px;
}

/* 「プレビュー本文」エリアは読みやすい行間 */
.remind-page .preview-area {
  background: #fafbff;
  border: 1px solid #e4e7f0;
  border-radius: 8px;
  padding: 12px;
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* 利用できる変数ラベル等の小パーツ（必要なら） */
.remind-page .pill {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 9999px;
  background: #eef2ff;
  color: #374151;
  font-size: 12px;
  margin: 0 6px 6px 0;
}

/* 予約リンクの“巨大テキスト群”は完全非表示（保険） */
.remind-page .booking-link-dump { display: none !important; }

/* 再来リマインド設定ページ限定：予約リンク input の後ろに出る謎出力を全カット */
.remind-page #pv_booking_link ~ *:not(#previewText):not(script):not(style) {
  display: none !important;
}

/* ====== 上部ツールバー（検索/絞り込み） ====== */
.toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin: 8px 0 14px;
}
.toolbar input[type="text"], .toolbar select{
  padding: 10px 12px;
  border: 1px solid #d7dbe7;
  border-radius: 8px;
  font-size: 14px;
}

/* ====== ボタン並び（confirm/send_all等） ====== */
.actions-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 12px;
}

/* ====== 長いトークン/秘密鍵を読みやすく（LINE連携） ====== */
.mono-textarea{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono","Courier New", monospace;
  word-break: break-all;
  white-space: pre-wrap;
}
.form-grid{ display:grid; gap:14px; }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.check-row{ display:flex; gap:8px; align-items:center; }

.toolbar{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin: 8px 0 14px;
}
.actions-row{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin-top: 12px;
}
.form-grid{ display:grid; gap:14px; }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.check-row{ display:flex; gap:8px; align-items:center; }

/* wrapper */
.pill-toggle{
  display:inline-block;
  user-select:none;
}

/* 元のcheckboxは完全に消す（左のチェックも消える） */
.pill-toggle > input{
  display:none;
}

/* 「＞」が出る系の疑似要素を念のため全部殺す */
.pill-toggle::after,
.pill-toggle .pill-ui::after,
.pill-toggle .pill-ui::before{
  content:none !important;
}

/* 本体（サイズはここで調整。今の“1/3くらい”ならこの辺） */
.pill-ui{
  position:relative;
  display:inline-block;
  width: 240px;     /* ← ここで全体サイズ */
  height: 72px;
  border-radius: 999px;
  box-sizing:border-box;
  overflow:hidden;

  /* OFF時の質感：白・ボタンっぽい */
  background: linear-gradient(180deg, #ffffff 0%, #f2f5ff 100%);
  border: 1px solid #d8dff0;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.9);

  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* 文字：常にど真ん中 */
.pill-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  font-size: 34px;
  letter-spacing: 0.02em;

  /* OFF時は濃いめ（白背景に合う） */
  color:#2a2f3a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}

/* 丸（浮いて見える） */
.pill-knob{
  position:absolute;
  top: 10px;
  left: 10px;               /* OFFは左 */
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: #fff;
  box-shadow:
    0 12px 18px rgba(0,0,0,0.18),
    0 2px 0 rgba(255,255,255,0.6),
    inset 0 1px 1px rgba(0,0,0,0.06);
  transition: transform .20s ease, left .20s ease;
}

/* ON */
.pill-toggle > input:checked + .pill-ui{
  background: linear-gradient(180deg, #2f8bff 0%, #1467d9 100%);
  border-color: rgba(0,0,0,0.06);
  box-shadow:
    0 14px 28px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.25);
}

/* ON時の文字は白 */
.pill-toggle > input:checked + .pill-ui .pill-text{
  color:#fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.18);
}

/* ON時、丸は右へ */
.pill-toggle > input:checked + .pill-ui .pill-knob{
  left: calc(100% - 10px - 52px);
}

/* クリック感（任意） */
.pill-ui:active .pill-knob{
  transform: scale(0.98);
}

/* 「有効 >」の > は、だいたい共通CSSの label::after 由来。強制的に消す */
label.pill-toggle::after,
label.pill-toggle::before,
.pill-toggle::after,
.pill-toggle::before,
.pill-toggle .pill-ui::after,
.pill-toggle .pill-ui::before{
  content: "" !important;
  display: none !important;
}

/* 変な「>」がどこかのlabel::after等で混ざるのを強制除去 */
.pill-toggle::after,
.pill-ui::after,
.pill-text::after { content: "" !important; }

/* 1/3くらいのサイズに */
.pill-toggle { display:inline-block; }
.pill-toggle input { position:absolute; opacity:0; width:0; height:0; }

.pill-ui{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 150px;     /* ←ここでサイズ調整（好みで 140〜170） */
  height: 54px;     /* ←ここも */
  border-radius: 999px;

  background: #ffffff;              /* OFFは白 */
  border: 2px solid #cfd8ea;        /* OFFの縁 */
  box-shadow: none;                  /* ガラス感なし */
}

.pill-text{
  font-weight: 800;
  font-size: 24px;
  color: #1f2937;
  user-select: none;
}

/* knob：浮きすぎない“写真っぽい”影（控えめ） */
.pill-knob{
  position:absolute;
  top: 6px;
  left: 6px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
  transition: transform .18s ease;
}

/* ON */
.pill-toggle input:checked + .pill-ui{
  background: #1976d2;         /* 青 */
  border-color: #1976d2;
}
.pill-toggle input:checked + .pill-ui .pill-text{
  color: #ffffff;
}
.pill-toggle input:checked + .pill-ui .pill-knob{
  transform: translateX(96px); /* = width - knob - padding*2 くらい */
}

/* サイドバー無しページ用 */
.layout.no-sidebar {
  grid-template-columns: 1fr;
}

.layout.no-sidebar .main {
  margin-left: 0;
}

/* 営業時間 行 */
.biz-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

.biz-row .time-group{
  display:flex;
  align-items:center;
  gap:10px;
}

.biz-row input[type="time"]{
  width: 120px;
}

.biz-row .right-group{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
}

/* 画面が狭い時は右側を下に落として被り防止 */
@media (max-width: 900px){
  .biz-row .right-group{
    margin-left:0;
    width:100%;
    justify-content:flex-start;
  }
}

/* ===== staff pages polish ===== */
.page-card {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.section-title {
  font-weight: 700;
  letter-spacing: .02em;
}

.muted {
  color: rgba(0,0,0,.55);
  font-size: .92rem;
}

.badge-soft {
  background: rgba(13,110,253,.10);
  color: #0d6efd;
  border: 1px solid rgba(13,110,253,.18);
  font-weight: 600;
}

.table-soft {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  overflow: hidden;
}

.table-soft thead th {
  background: rgba(0,0,0,.03);
  border-bottom: 1px solid rgba(0,0,0,.06);
  font-weight: 700;
}

.table-soft td, .table-soft th {
  padding: 12px 14px;
  vertical-align: middle;
}

.form-card {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: rgba(0,0,0,.015);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: white;
  font-size: .9rem;
}

.table-soft.table-compact td,
.table-soft.table-compact th {
  padding: 8px 10px;
  font-size: 0.95rem;
}

.wrap {
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
}

/* ====== モバイル共通 ====== */

.mobile-topbar,
.mobile-overlay,
.mobile-menu-btn,
.sidebar-close-btn {
  display: none;
}

.brand-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #ffffff;
  margin-bottom: 14px;
}

.nav-section-title {
  margin-top: 10px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 800;
  color: #f8d66d;
}

.table-basic-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  .main-area {
    padding: 16px;
  }

  .content-card {
    padding: 18px;
    border-radius: 18px;
  }
}

@media (max-width: 760px) {
  body {
    background: #eef2f7;
  }

  .mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    background: rgba(17, 24, 39, 0.92);
    color: #fff;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  }

  .mobile-menu-btn,
  .sidebar-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.08);
  }

  .mobile-topbar-text {
    min-width: 0;
  }

  .mobile-topbar-title {
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-topbar-sub {
    font-size: 11px;
    color: rgba(255,255,255,0.72);
    margin-top: 2px;
  }

  .mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    opacity: 0;
    pointer-events: none;
    z-index: 45;
    transition: opacity 0.2s ease;
  }

  .layout {
    min-height: calc(100vh - 62px);
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    width: min(84vw, 290px);
    flex-basis: auto;
    padding-top: calc(14px + env(safe-area-inset-top));
    transform: translateX(-102%);
    transition: transform 0.24s ease;
    overflow-y: auto;
    box-shadow: 18px 0 40px rgba(0,0,0,0.28);
  }

  .sidebar-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
  }

  .sidebar-mobile-title {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
  }

  .brand-title {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .nav-link {
    font-size: 15px;
    padding: 12px 12px;
  }

  .nav-sublink {
    font-size: 13px;
    padding-left: 30px;
  }

  .nav-toggle-input:checked ~ .mobile-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .nav-toggle-input:checked ~ .layout .sidebar {
    transform: translateX(0);
  }

  .main-area {
    width: 100%;
    padding: 12px;
  }

  .content-card {
    padding: 14px;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  }

  .page-title {
    font-size: 22px;
    line-height: 1.25;
  }

  .table-basic {
    min-width: 640px;
  }

  .sidebar-footer {
    margin-top: auto;
    padding-top: 14px;
    background: linear-gradient(180deg, rgba(22,24,39,0) 0%, rgba(22,24,39,0.94) 18%, rgba(22,24,39,1) 100%);
    position: sticky;
    bottom: 0;
  }

  .logout-btn {
    padding: 11px 12px;
    border-radius: 10px;
  }
}

.nav-account-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.nav-logout-form {
  margin: 0 0 10px 0;
}

.login-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: rgba(10, 10, 14, 0.92);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 24px 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
}

.login-title {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
  color: #fff;
}

.login-subtitle {
  margin: 0 0 20px;
  color: rgba(255,255,255,0.68);
  font-size: 14px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.84);
}

.login-input {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding: 0 14px;
  font-size: 16px;
}

.login-input:focus {
  outline: none;
  border-color: #4f8cff;
  box-shadow: 0 0 0 3px rgba(79,140,255,0.16);
}

.login-submit {
  margin-top: 6px;
  height: 48px;
  border: none;
  border-radius: 12px;
  background: #2f6df6;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.login-help {
  margin-top: 16px;
  color: rgba(255,255,255,0.58);
  font-size: 12px;
  line-height: 1.6;
}

.login-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  text-decoration: none;
  background: transparent;
}

@media (max-width: 640px) {
  .login-page {
    align-items: flex-start;
    padding: 88px 16px 24px;
  }

  .login-card {
    max-width: none;
    border-radius: 18px;
    padding: 20px 16px;
  }

  .login-title {
    font-size: 24px;
  }

  .login-subtitle {
    font-size: 13px;
  }
}

.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.shift-table{
  min-width:520px;
}

@media (max-width:768px){

  .section-block{
    padding:12px;
  }

  .shift-table th,
  .shift-table td{
    white-space:nowrap;
  }

  .shift-table select,
  .shift-table input{
    font-size:14px;
  }

}

.shift-add-form{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
}

@media (max-width:768px){

  .shift-add-form{
    display:grid;
    grid-template-columns:1fr;
  }

  .shift-add-form select,
  .shift-add-form input,
  .shift-add-form button{
    width:100%;
  }

}

/* テーブルスマホ対応 */

.table-wrapper{
overflow-x:auto;
}


/* フォーム */

.form-stack{
max-width:420px;
}

.form-group{
display:flex;
flex-direction:column;
margin-bottom:10px;
}

.form-group input{
width:100%;
}


/* セクションタイトル */

.section-title{
font-size:16px;
font-weight:600;
margin:0 0 10px 0;
}


/* メール折り返し */

.email-cell{
word-break:break-all;
}


/* 補足 */

.form-note{
font-size:12px;
color:#666;
margin-top:12px;
}

.empty-note{
font-size:14px;
color:#666;
}


/* スマホ */

@media (max-width:768px){

.section-block{
padding:18px;
}

.page-title{
font-size:20px;
}

}

.image-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.85);
}

.image-modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

.image-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.zoomable {
  cursor: zoom-in;
  transition: transform 0.2s;
}

.zoomable:hover {
  transform: scale(1.02);
}

.dash-flash {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-weight: 700;
}
.dash-flash.success { background:#ecfdf5; color:#166534; border:1px solid #86efac; }
.dash-flash.error   { background:#fef2f2; color:#b91c1c; border:1px solid #fca5a5; }
.dash-flash.warning { background:#fffbeb; color:#b45309; border:1px solid #fcd34d; }
.dash-flash.info    { background:#eff6ff; color:#1d4ed8; border:1px solid #93c5fd; }

.help-modal-link{
  margin-top:18px;
  padding-top:12px;
  border-top:1px solid rgba(0,0,0,.08);
  text-align:right;
}

.help-modal-link a{
  color:#2563eb;
  font-weight:700;
  text-decoration:none;
  font-size:14px;
}

.help-modal-link a:hover{
  text-decoration:underline;
}