/*
================================================================
V300-5 style.css
----------------------------------------------------------------
このファイルはV300系の画面デザインを管理する。

主な役割
- 共通色・余白・角丸などのCSS変数を定義する
- ログイン画面の見た目を管理する
- 予約者ログイン後画面のレイアウトを管理する
- PC/スマホのレスポンシブ表示を管理する

注意
- JSの機能ロジックはここへ書かない
- 画面配置変更は、対応するクラスのコメントを確認してから行う
================================================================
*/
/*
================================================================
V300-1 style.css
----------------------------------------------------------------
V271のログイン画面に使用していた見た目だけを抜き出したものです。
デザイン変更はしていません。
================================================================
*/
:root{
  --bg:#f6f8fb;
  --card:#fff;
  --text:#1f2937;
  --muted:#6b7280;
  --line:#d9e1ea;
  --primary:#20527f;
  --soft:#eef4fa;
  --radius-control:10px;
  --radius-button:11px;
  --radius-card:16px;
  --control-height:46px;
  --control-padding:12px;
  --button-padding:12px 15px;
  --card-padding:18px;
}

/* ボタン等のdisplay指定よりhidden属性を優先し、非表示判定を確実にする。 */
[hidden]{
  display:none !important;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Yu Gothic",Meiryo,sans-serif;
  background:var(--bg);
  color:var(--text);
}

header{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
}

.h{
  max-width:1050px;
  margin:auto;
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.brand{font-weight:800}

.demo{
  font-size:12px;
  background:#fff4cc;
  border:1px solid #e7cf6d;
  border-radius:999px;
  padding:4px 8px;
}

main{
  max-width:1050px;
  margin:auto;
  padding:18px 14px 40px;
}

.screen{display:none}
.screen:target{display:block}
#login{display:block}
body:has(.screen:target:not(#login)) #login{display:none}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:var(--card-padding);
  box-shadow:0 4px 18px rgba(0,0,0,.04);
}

/* 同じ画面内で縦に並ぶ、見出し付き内容カードの共通差分。 */
.section-card{margin-top:14px}
.section-card h2{margin-top:0}

.content-width-560{
  max-width:560px;
  margin:20px auto;
}

.content-width-720{
  max-width:720px;
  margin:20px auto;
}

h1{
  font-size:25px;
  margin:0 0 8px;
}

.muted{color:var(--muted)}

.field{margin-bottom:14px}

.field label{
  display:block;
  font-size:13px;
  font-weight:700;
  margin-bottom:6px;
}

input,select{
  width:100%;
  min-height:var(--control-height);
  box-sizing:border-box;
  font-size:16px;
  padding:var(--control-padding);
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:var(--card);
  color:var(--text);
}

input:focus,select:focus{
  outline:2px solid rgba(32,82,127,.20);
  outline-offset:1px;
  border-color:var(--primary);
}

.actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:16px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--control-height);
  box-sizing:border-box;
  padding:var(--button-padding);
  border:1px solid transparent;
  border-radius:var(--radius-button);
  background:var(--primary);
  color:#fff;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
}

.btn:focus-visible{
  outline:3px solid rgba(32,82,127,.22);
  outline-offset:2px;
}

.btn.secondary{
  background:var(--card);
  color:var(--primary);
  border-color:#b8c7d6;
}

.btn.ghost{
  background:#f7f9fc;
  color:var(--primary);
  border-color:var(--line);
}

.btn.danger{
  background:#b42318;
}

.warn-box{
  padding:14px;
  border:1px solid #efb5ae;
  border-radius:var(--radius-button);
  background:#fff4f2;
  color:#7a271a;
}

.warn-box p:last-child{
  margin-bottom:0;
}

.admin-reservation-summary{
  margin:6px 0 0;
  font-weight:700;
}

/* 管理者画面はV271と同じく、PCでは左メニューと予約一覧の2列構成にする。 */
.admin-grid{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:14px;
}

.sidebar h2,
.admin-search-card h2,
.admin-list-heading h2{
  margin-top:0;
}

.sidebar .btn{
  width:100%;
  margin-bottom:7px;
  justify-content:flex-start;
  text-align:left;
}

.admin-menu-mobile{
  display:none;
}

.admin-list-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.admin-date-field{
  width:190px;
  margin-bottom:0;
}

.admin-search-card{
  margin-bottom:16px;
  box-shadow:none;
}

.admin-search{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}

.admin-search-note{
  margin:8px 0 0;
  font-size:12px;
}

.inline-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.btn.full{width:100%}

.grid-full{grid-column:1 / -1}

.tabs{
  display:flex;
  gap:8px;
  background:#eef3f8;
  padding:5px;
  border-radius:11px;
  margin:16px 0;
}

.tabs a{
  flex:1;
  text-align:center;
  text-decoration:none;
  color:#667;
  padding:10px;
  border-radius:8px;
  font-weight:700;
}

.tabs a.active{
  background:#fff;
  color:var(--primary);
}

.field-message{
  min-height:18px;
  margin:6px 0 0;
  font-size:12px;
  color:var(--muted);
}
.field-message.error{color:#b42318}

/*
 * 2列フォームの共通レイアウト。
 * 余白と1列へ切り替える画面幅は、既存画面の見た目を保つため別クラスで指定する。
 */
.form-grid-two-column{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.form-grid-field-gap{gap:0 14px}
.form-grid-period-gap{gap:12px}
@media(max-width:480px){
  .form-grid-collapse-480{grid-template-columns:1fr}
}
@media(max-width:600px){
  .form-grid-collapse-600{grid-template-columns:1fr}
}
@media(max-width:640px){
  .form-grid-collapse-640{grid-template-columns:1fr}
}

/* 操作履歴はV271と同じ5条件とカード一覧。画面幅に応じて列数を減らす。 */
.audit-filter-card{margin:14px 0}
.audit-filter-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:end}
.audit-log-list{display:grid;gap:10px}
.audit-log-card{padding:12px;border:1px solid var(--line);border-radius:var(--radius-button)}
.audit-log-meta{margin-top:5px}
.audit-log-details{margin-top:8px;font-size:13px;line-height:1.7;white-space:pre-line}
@media(max-width:900px){.audit-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.audit-filter-grid{grid-template-columns:1fr}}

/* お知らせ管理はV271と同じ幅・縦長入力で、PCとスマホの双方で横崩れを防ぐ。 */
.admin-notice-card{max-width:760px}
#adminNoticeInput{display:block;width:100%;min-height:180px;box-sizing:border-box;resize:vertical;line-height:1.6}
.admin-notice-help{margin-bottom:12px}

/* 集計はV271と同じKPI・キャリア別表・日別一覧をレスポンシブ表示する。 */
.summary-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.summary-kpis{margin-top:14px}
.summary-kpi{margin:0}
.summary-kpi strong{display:block;margin-top:6px;font-size:26px}
.summary-table-wrap{width:100%;overflow-x:auto}
.summary-table{width:100%;min-width:420px;border-collapse:collapse}
.summary-table th,.summary-table td{padding:11px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.summary-table th:nth-child(2),.summary-table th:nth-child(3),.summary-table td:nth-child(2),.summary-table td:nth-child(3){text-align:right}
.summary-day-list{
  display:grid;
  max-height:500px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.summary-day-row{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.summary-day-row strong{text-align:right}
@media(max-width:480px){
  .summary-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .summary-kpi strong{font-size:22px}
  .summary-day-list{max-height:390px}
  .summary-day-row{display:block}
  .summary-day-row strong{display:block;margin-top:5px;text-align:left}
}

/* CSV出力はV271と同じ2列構成。スマホでは1列へ切り替える。 */
.csv-check-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.csv-check{
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-button);
  background:#fff;
  cursor:pointer;
}
.csv-check input[type="checkbox"]{width:18px;height:18px;min-height:0;margin:0;flex:0 0 auto}
.csv-check span{font-size:13px;line-height:1.35}
@media(max-width:480px){
  .csv-check-grid{grid-template-columns:1fr}
}

/* 顧客情報はV271と同じカード一覧と2列入力を、スマホでは1列にする。 */
.customer-search-card{margin:14px 0}
.customer-company-list,.customer-driver-list{display:grid;gap:12px}
.customer-company-card{width:100%;text-align:left;cursor:pointer}
.customer-company-card .row1{display:flex;justify-content:space-between;gap:12px}
.customer-company-card .driver-names{margin-top:10px;font-size:13px}
.customer-company-card .detail-link{margin-top:9px;font-size:12px;font-weight:700}
.customer-driver-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px}
.customer-driver-card{padding:14px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--soft)}
.customer-driver-card h3{margin:0}
.customer-driver-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@media(max-width:600px){
  .customer-driver-heading{align-items:flex-start;flex-direction:column}
  .customer-company-card .row1{align-items:flex-start;flex-direction:column}
}

/* 予約不可設定はV271と同じカード構成で、入力幅だけ共通レスポンシブ化する。 */
.unavailable-list{display:grid;gap:10px}
.unavailable-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:var(--radius-button);
  background:#f7f9fc;
}
.unavailable-item-detail{min-width:0}
.unavailable-item-detail strong{display:block;margin-bottom:3px}
.unavailable-item .btn{flex:0 0 auto}
@media(max-width:600px){
  .unavailable-item{align-items:flex-start;flex-direction:column}
}

/* ================================================================
   ページ上部・カード内見出しの共通レイアウト
   画面上部は page-header、カード内は section-header で役割を区別する。
   ================================================================ */
.page-header,
.section-header{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.page-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.chip{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-size:13px;
  font-weight:700;
}

.page-header-control{
  min-height:38px;
  padding:8px 12px;
}

/* 予約者画面のナビゲーション領域。
   予約確認ボタンを画面左側へ配置する。 */
.customer-nav{
  display:flex;
  justify-content:flex-start;
  margin:12px 0;
}

.margin-bottom-14{margin-bottom:14px}
.margin-bottom-8{margin-bottom:8px}
.margin-none{margin:0}
.align-center{align-items:center}
.prewrap-readable{white-space:pre-wrap;line-height:1.7}

.calendar-month-nav{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  margin-top:16px;
}

.text-bold-center{
  font-weight:700;
  text-align:center;
}

@media(max-width:640px){
  .page-header,
  .section-header{
    flex-direction:column;
  }
  .page-header-actions{
    width:100%;
    justify-content:space-between;
  }
  /* スマホでも予約確認ボタンは左寄せの通常幅で表示する。 */
  .customer-nav{
    justify-content:flex-start;
  }
  .customer-nav .btn{
    width:auto;
  }
}

/* ================================================================
   V300-62 QR受付
   ================================================================ */
.reception-entry{
  background:#0f766e;
  border-color:#0f766e;
}

.reception-qr-card{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--line);
  text-align:center;
}

.reception-qr-card h2{
  margin-top:0;
}

.reception-qr-code{
  display:flex;
  justify-content:center;
  margin:14px auto;
}

.reception-qr-code img,
.reception-qr-code canvas{
  max-width:192px;
  width:100%;
  height:auto;
}

.reception-layout{
  display:grid;
  grid-template-columns:minmax(320px, .8fr) minmax(0, 1.2fr);
  gap:18px;
  align-items:start;
}

.reception-reader-card h2:first-child,
.reception-actions h2{
  margin-top:0;
}

.reception-video{
  width:100%;
  max-height:360px;
  margin-top:12px;
  border-radius:var(--radius-control);
  background:#111827;
  object-fit:cover;
}

.reception-manual{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--line);
}

.reception-actions{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--line);
}

.reception-completion{
  padding:24px 0 4px;
}

.reception-completion h2{
  margin-top:0;
}

.reception-actions.reception-completion-actions{
  display:flex;
  justify-content:center;
}

.reception-driver-list{
  display:grid;
  gap:10px;
}

.reception-driver-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:var(--soft);
}

.reception-driver-name{
  min-width:0;
  font-weight:700;
  overflow-wrap:anywhere;
}

@media(max-width:760px){
  .reception-layout{
    grid-template-columns:1fr;
  }

  .reception-driver-row{
    align-items:stretch;
    flex-direction:column;
  }
}


/* ================================================================
   V300-7 予約者向け月間カレンダー
   ----------------------------------------------------------------
   役割:
   - 7列の日付グリッドを表示する
   - 曜日見出しと日付セルの位置をそろえる
   - 今回は表示のみ。クリック可能な見た目にはまだしない
   ================================================================ */

/* 予約者・管理者で共通する、日〜土の曜日見出し。 */
.calendar-weekdays{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;
  margin-top:16px;
  margin-bottom:6px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  text-align:center;
}

/* 予約者・管理者の月間カレンダーに共通する7列の骨格。 */
.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
}

/* 予約者カレンダー固有のセル間隔。 */
.customer-calendar-grid{
  gap:6px;
}

/* 予約者・管理者の日付セルで共通する外枠。 */
.customer-calendar-day,
.admin-calendar-day{
  border:1px solid var(--line);
  background:#fff;
}

/* 予約者側の1日分の日付セル。 */
.customer-calendar-day{
  min-height:68px;
  padding:8px;
  border-radius:10px;
}

/* 前月・翌月分の空白セル。 */
.customer-calendar-day.is-empty,
.admin-calendar-day.is-empty{
  visibility:hidden;
}

/* 日付番号の共通表示。 */
.customer-calendar-day-number,
.admin-calendar-day-number{
  font-size:14px;
  font-weight:700;
}

/* 本日の日付セルだけ枠を少し強調する。 */
.customer-calendar-day.is-today,
.admin-calendar-day.is-today{
  border-color:var(--primary);
  box-shadow:inset 0 0 0 1px var(--primary);
}

/* 日曜日の日付番号。 */
.customer-calendar-day.is-sunday .customer-calendar-day-number,
.admin-calendar-day.is-sunday .admin-calendar-day-number{
  color:#b42318;
}

/* 土曜日の日付番号。 */
.customer-calendar-day.is-saturday .customer-calendar-day-number,
.admin-calendar-day.is-saturday .admin-calendar-day-number{
  color:#20527f;
}

/* スマホではセル高さと余白を少しだけ縮める。 */
@media(max-width:640px){
  .calendar-weekdays,
  .customer-calendar-grid{
    gap:4px;
  }

  .customer-calendar-day{
    min-height:54px;
    padding:6px 4px;
  }

  .customer-calendar-day-number{
    font-size:13px;
  }
}


/* ================================================================
   V300-8 日付選択・キャリア選択
   ================================================================ */

/* 両カレンダーで共通する、押下可能な日付セルの基本操作。 */
button.customer-calendar-day,
button.admin-calendar-day{
  cursor:pointer;
  font:inherit;
}

/* 日付セルにマウスを乗せたときの共通フィードバック。 */
button.customer-calendar-day:hover,
button.admin-calendar-day:hover{
  background:var(--soft);
}

/* キーボード操作時のフォーカス表示。 */
button.customer-calendar-day:focus-visible,
button.admin-calendar-day:focus-visible{
  outline:3px solid rgba(32,82,127,.22);
  outline-offset:2px;
}

/* 予約者側だけで必要なボタン寸法と文字配置。 */
button.customer-calendar-day{
  width:100%;
  text-align:left;
  color:var(--text);
}

/* 選択中の日付情報を表示する領域。 */
.selected-reservation-info{
  margin:16px 0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:var(--soft);
}

/* 選択中の日付の主表示。 */
.selected-reservation-value{
  margin-top:4px;
  font-size:18px;
  font-weight:800;
}

/* キャリアタイプ選択ボタンを並べるグリッド。 */
.customer-carrier-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}

/* キャリアタイプ選択ボタン。 */
.customer-carrier-button{
  min-height:54px;
  padding:12px;
  border:1px solid #b8c7d6;
  border-radius:var(--radius-button);
  background:#fff;
  color:var(--primary);
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

/* キャリアタイプ選択ボタンのホバー表示。 */
.customer-carrier-button:hover{
  background:var(--soft);
}

/* スマホではキャリア選択ボタンを2列にする。 */
@media(max-width:640px){
  .customer-carrier-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* ================================================================
   V300-10 予約者カレンダー 日付選択制御
   ================================================================ */

/*
 * 土日・締切超過・終日予約不可日の見た目。
 * 警告を出すため pointer-events:none は付けない。
 */
button.customer-calendar-day.is-blocked{
  background:#f3f3f3;
  border-color:#d7dce1;
  color:#9aa0a6;
  cursor:not-allowed;
}

/* 選択不可日はhoverしても通常の選択可能色へ変えない。 */
button.customer-calendar-day.is-blocked:hover{
  background:#f3f3f3;
}

/* 予約不可セル内の短い案内。 */
.customer-calendar-blocked-label{
  margin-top:5px;
  font-size:9px;
  font-weight:700;
  line-height:1.2;
  color:#999;
}

/*
 * 終日予約不可設定は土日・締切と同じグレー表示にする。
 * 専用クラスは今後理由表示等を拡張するときの識別用。
 */
button.customer-calendar-day.is-booking-blocked{
  background:#f1f1f1;
}

/* 土日の予約不可セルでも曜日色は残しつつ少し薄く表示する。 */
button.customer-calendar-day.is-blocked.is-sunday
.customer-calendar-day-number{
  color:#c97a74;
}

button.customer-calendar-day.is-blocked.is-saturday
.customer-calendar-day-number{
  color:#7c9bb6;
}

/* ================================================================
   V300-48 管理者カレンダー
   V271と同じく、各日に予約件数と通算台数を2行で表示する。
   曜日見出しと基本セルは予約者カレンダーの既存寸法を再利用する。
   ================================================================ */
.admin-calendar-card{
  overflow:hidden;
}

.admin-calendar-grid{
  gap:4px;
}

.admin-calendar-day{
  width:100%;
  min-width:0;
  height:92px;
  padding:6px 4px;
  border-radius:9px;
  color:var(--text);
  overflow:hidden;
  text-align:left;
}

.admin-calendar-day-summary{
  width:100%;
  margin-top:8px;
  white-space:nowrap;
  font-size:10px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.02em;
}

.admin-calendar-day-vehicles{margin-top:4px}

@media(max-width:520px){
  #admin-calendar{margin-left:-4px;margin-right:-4px}
  .admin-calendar-card{padding:12px 8px}
  .admin-calendar-grid,
  #admin-calendar .calendar-weekdays{gap:3px}
  #admin-calendar .calendar-weekdays div{font-size:10px}
  .admin-calendar-day{
    height:86px;
    padding:5px 3px;
    border-radius:7px;
  }
  .admin-calendar-day-summary{font-size:9px}
}

/* ================================================================
   V300-56 管理者の日付別予約状況
   V271と同じ時間軸で、予約・予約不可・空き時間を縦に表示する。
   ================================================================ */
.schedule-wrap{overflow:hidden}
.schedule-row{
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  min-height:76px;
  border-top:1px solid var(--line);
}
.schedule-time{
  padding:11px 8px 8px 0;
  color:#4b5563;
  font-size:12px;
  font-weight:800;
  line-height:1.25;
}
.schedule-events{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:5px;
  padding:7px;
  border-left:1px solid var(--line);
}
.schedule-event{
  display:block;
  padding:8px 9px;
  border:0;
  border-left:6px solid;
  border-radius:8px;
  color:var(--text);
  font:inherit;
  font-size:12px;
  line-height:1.35;
  text-align:left;
  cursor:pointer;
}
.schedule-event strong{
  display:block;
  overflow:hidden;
  font-size:12px;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.schedule-event small{
  display:block;
  margin-top:2px;
  color:#4b5563;
}
.schedule-event.movement-in{
  border-left-color:#2563eb;
  background:#eff6ff;
}
.schedule-event.movement-out{
  border-left-color:#ea580c;
  background:#fff7ed;
}
.schedule-event.is-completed{
  border-left-color:#9ca3af;
  background:#e5e7eb;
  color:#6b7280;
}
.schedule-event.is-completed small{color:#7a8087}
.movement-badge{
  display:inline-block;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.calendar-completed-status{
  display:inline-block;
  margin-left:6px;
  padding:2px 7px;
  border-radius:999px;
  background:#d1d5db;
  color:#555;
  font-size:11px;
  font-weight:800;
}
.schedule-empty,
.schedule-unavailable{
  padding:9px 2px;
  color:#9ca3af;
  font-size:12px;
}
.schedule-unavailable{
  color:#7a271a;
  font-weight:800;
}
@media(max-width:520px){
  .schedule-row{
    grid-template-columns:68px minmax(0,1fr);
    min-height:72px;
  }
  .schedule-time{padding-right:5px;font-size:11px}
  .schedule-events{padding:6px}
  .schedule-event{padding:7px 8px}
  .admin-day-summary{justify-content:flex-start}
}

@media(max-width:640px){
  .customer-calendar-blocked-label{
    margin-top:3px;
    font-size:8px;
  }
}


/* ================================================================
   V300-12 予約可否メッセージ
   V271の bookingMessageModal と同じ表示仕様。
   ================================================================ */
#bookingMessageModal,
#confirmationMessageModal{
  position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.35);
  display:none;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;
}
#bookingMessageModal.show,
#confirmationMessageModal.show{display:flex}
#bookingMessageModal .booking-message-box,
#confirmationMessageModal .booking-message-box{
  width:min(420px,100%);background:#fff;border-radius:16px;padding:22px;
  box-sizing:border-box;box-shadow:0 18px 50px rgba(0,0,0,.2);
}
#bookingMessageModal .booking-message-text,
#confirmationMessageModal .booking-message-text{
  white-space:pre-line;line-height:1.7;font-size:15px;color:#222;
}
#bookingMessageModal .booking-message-actions,
#confirmationMessageModal .booking-message-actions{
  display:flex;justify-content:flex-end;gap:10px;margin-top:20px;
}


/* ================================================================
   V300-13 予約者 時間選択画面
   ----------------------------------------------------------------
   V271の .slots / .slot の見た目を基準にする。
   PCは4列、スマホは2列。
   ================================================================ */

/* 時間選択ボタンをPCでは4列で表示する。 */
.customer-time-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:16px;
}

/* 1時間枠分の選択ボタン。 */
.customer-time-button{
  min-height:46px;
  padding:12px 8px;
  border:1px solid #cbd5df;
  background:#fff;
  border-radius:9px;
  font:inherit;
  font-weight:700;
  color:var(--text);
  text-align:center;
  cursor:pointer;
}

/* 選択可能時間のホバー表示。 */
.customer-time-button:not(.is-blocked):hover{
  background:var(--soft);
}

/*
 * 予約不可時間。
 * V271と同じくグレー表示する。
 *
 * 警告を表示するため pointer-events:none は付けず、
 * タップイベント自体は受け取れる状態にする。
 */
.customer-time-button.is-blocked{
  background:#eee;
  color:#aaa;
  border-color:#ddd;
  opacity:.45;
  cursor:not-allowed;
}

/* キーボード操作時のフォーカス表示。 */
.customer-time-button:focus-visible{
  outline:3px solid rgba(32,82,127,.22);
  outline-offset:2px;
}

/* 管理者予約追加は共通カレンダー・時間枠の骨格を再利用する。 */
.admin-add-schedule-picker{margin-bottom:24px}
.calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.admin-add-calendar-grid{gap:6px}
.admin-add-calendar-grid .admin-calendar-day{height:68px;padding:8px;border-radius:10px}
.admin-add-calendar-grid .admin-calendar-day.has-warning{background:#f3f3f3;color:#777}
.admin-add-calendar-grid .admin-calendar-day.is-selected,
.admin-add-time-button.is-selected{border-color:var(--primary);background:#e9f2f9;box-shadow:0 0 0 2px rgba(32,82,127,.16)}
.admin-add-time-heading{margin-top:24px}
.admin-add-time-button.has-warning{background:#eee;color:#777;border-color:#d5d5d5}
.admin-add-day-warning{display:block;margin-top:5px;font-size:9px;font-weight:700;white-space:nowrap}
.admin-add-time-warning{display:block;margin-top:3px;font-size:10px;font-weight:600}
@media(max-width:640px){
  .admin-add-calendar-grid{gap:3px}
  .admin-add-calendar-grid .admin-calendar-day{height:54px;padding:5px 3px;font-size:12px}
  .calendar-toolbar .btn{padding:8px;font-size:12px}
}

/* スマホではV271と同じく2列表示にする。 */
@media(max-width:640px){
  .customer-time-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* ================================================================
   V300-14 満枠表示
   ================================================================ */

/*
 * 満枠の時間にはV271と同じく「満枠」を追記する。
 * booking_blocksによる予約不可時間とは視覚上区別できる。
 */
.customer-time-button.is-full::after{
  content:"満枠";
  display:block;
  font-size:10px;
  margin-top:2px;
}


/* ================================================================
   V300-16 通常キャリア予約入力画面
   ================================================================ */

/* 入力画面では各フィールドの幅を列内へ収める。 */
.customer-form-grid .field{
  min-width:0;
}

/* textareaもinput/selectと同じ基本デザインにそろえる。 */
textarea{
  width:100%;
  box-sizing:border-box;
  font:inherit;
  font-size:16px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:var(--card);
  color:var(--text);
  resize:vertical;
}

/* textareaフォーカス時。 */
textarea:focus{
  outline:2px solid rgba(32,82,127,.20);
  outline-offset:1px;
  border-color:var(--primary);
}

/* 必須項目表示。 */
.required-badge{
  display:inline-block;
  margin-left:4px;
  font-size:11px;
  font-weight:700;
  color:#b42318;
}

/* 登録済み車輌番号の補足文。 */
.margin-top-8{
  margin-top:8px;
}

/* hidden属性を持つ「その他」入力欄は確実に非表示。 */
#customerVehicleOtherWrap[hidden]{
  display:none;
}

/* ================================================================
   V300-18 自走予約入力
   ================================================================ */

/* 台数ごとのドライバー情報カード。 */
.self-drive-driver-card{
  margin-top:14px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--soft);
}

/* 「1台目のドライバー」等の見出し。 */
.self-drive-driver-card h3{
  margin:0;
  font-size:15px;
}

.self-drive-driver-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:10px;
}

.self-drive-release-button{
  flex:0 0 auto;
}


/* ================================================================
   V300-20 予約内容確認画面
   ================================================================ */

/* V271と同じく、項目名と内容を左右に並べる。 */
.confirmation-detail-row{
  display:grid;
  grid-template-columns:minmax(150px, 32%) minmax(0, 1fr);
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}

.confirmation-detail-row:first-child{
  padding-top:0;
}

.confirmation-detail-row:last-child{
  padding-bottom:0;
  border-bottom:0;
}

.confirmation-detail-label{
  color:var(--muted);
}

.confirmation-detail-value{
  min-width:0;
  overflow-wrap:anywhere;
  white-space:pre-line;
}

/* 予約保存中は登録ボタンを操作不可にする。 */
.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* 予約完了カードはV271と同様に中央揃えで表示する。 */
.success{
  text-align:center;
}

/* 予約完了を示すチェックマーク。 */
.check{
  width:56px;
  height:56px;
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#e8f5ec;
  color:#237a3b;
  font-size:30px;
  font-weight:800;
}

/* 完了画面の予約番号。 */
.resno{
  margin:18px 0;
  padding:14px;
  border-radius:var(--radius-control);
  background:var(--soft);
  color:var(--primary);
  font-size:24px;
  font-weight:800;
  letter-spacing:.08em;
}

.justify-center{
  justify-content:center;
}

/* ================================================================
   V300-23 予約者予約確認一覧
   ================================================================ */

/* 予約カードを縦方向へ一定間隔で並べる。 */
.myres-list{
  display:grid;
  gap:12px;
}

/* 予約者・管理者一覧で共通利用するカード本体。 */
.myres-card{
  display:block;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:inherit;
  text-decoration:none;
}

/* 日時・予約番号と状態表示を左右へ配置する。 */
.myres-card .row1{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
}

.reservation-card-number{
  margin-top:4px;
}

/* 搬入は青、搬出はオレンジでV271と同じ識別色にする。 */
.movement-in{
  border-left:6px solid #2563eb;
  background:#eff6ff;
}

.movement-out{
  border-left:6px solid #ea580c;
  background:#fff7ed;
}

/* 変更可否を示す共通状態表示。 */
.status-pill{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  background:#f3f4f6;
  font-size:11px;
  font-weight:800;
}

.status-pill.editable{
  background:#ecfdf5;
}

.status-pill.viewonly{
  background:#f3f4f6;
  color:#6b7280;
}

/* 当日以降の予約が搬入済みの場合に完了状態を明確に示す。 */
.status-pill.completed{
  background:#e2e5e9;
  color:#555;
}

.myres-card:has(.status-pill.completed){
  border-color:#d7dce1;
  background:#f1f3f5;
  color:#7a8087;
}

/* 管理者一覧：通常予約の搬入・搬出済みチェック。 */
#adminReservationCards .admin-complete-control{
  display:flex;
  align-items:center;
  gap:7px;
  width:max-content;
  max-width:100%;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid #e5e7eb;
  color:#4b5563;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

/* 管理者一覧：自走予約は台数分を個別に完了管理する。 */
#adminReservationCards .selfdrive-complete-list{
  display:grid;
  gap:8px;
  margin-top:12px;
}

#adminReservationCards .selfdrive-complete-row{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  padding:8px 10px;
  border:1px solid #e1e4e8;
  border-radius:9px;
  background:#fff;
  color:#4b5563;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
}

#adminReservationCards .selfdrive-complete-row.done{
  background:#eee;
  color:#666;
  cursor:default;
}

#adminReservationCards .admin-complete-control input,
#adminReservationCards .selfdrive-complete-row input{
  flex:0 0 auto;
  width:18px;
  min-height:18px;
  height:18px;
  margin:0;
}

#adminReservationCards [data-admin-reservation-number]{
  cursor:pointer;
}

#adminReservationCards [data-admin-reservation-number]:focus-visible{
  outline:3px solid rgba(32,82,127,.22);
  outline-offset:2px;
}

/* 管理者予約変更：旧画面に合わせた搬入・搬出済み解除欄。 */
.admin-completion-release{
  margin-top:18px;
  padding:14px;
  border:1px solid #d9dee5;
  border-radius:10px;
  background:#f7f8fa;
}

.admin-completion-release h3{
  margin:0 0 10px;
  font-size:15px;
}

.admin-completion-release-check{
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:700;
}

.admin-completion-release-check input{
  width:18px;
  min-height:18px;
  height:18px;
  margin:0;
}

.admin-completion-release-note{
  margin:8px 0 0;
  font-size:12px;
}


/* 管理者詳細：V271と同じ位置に通常・自走の完了チェックを表示する。 */
#adminReservationDetailContent .compact-complete,
#adminReservationDetailContent .detail-driver-complete{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#4b5563;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

#adminReservationDetailContent .compact-complete input,
#adminReservationDetailContent .detail-driver-complete input{
  flex:0 0 auto;
  width:18px;
  min-height:18px;
  height:18px;
  margin:0;
}

#adminReservationDetailContent .detail-driver-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* 当日以降と過去予約の枠を分けて表示する。 */
.reservation-group-card{
  margin-top:14px;
}

/* ================================================================
   V300-26 予約者予約詳細
   ================================================================ */

/* 予約番号と予約状態を左右へ配置する。 */
.detail-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}

.text-small{
  font-size:12px;
}

.text-20{
  font-size:20px;
}

.reservation-detail-grid{
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}

/* 自走は台数ごとのドライバー情報をカードで区切る。 */
.reservation-detail-drivers{
  display:grid;
  gap:10px;
  margin-top:14px;
}

.detail-driver-block{
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:var(--soft);
}

.detail-driver-block h3{
  margin:0;
  font-size:15px;
}

/* 一覧カード内の項目名・値を読みやすくそろえる。 */
.detail-grid{
  display:grid;
  grid-template-columns:minmax(100px, 26%) minmax(0, 1fr);
  gap:7px 12px;
  margin:14px 0 0;
}

.detail-grid dt{
  color:var(--muted);
}

.detail-grid dd{
  min-width:0;
  margin:0;
  overflow-wrap:anywhere;
}

.reservation-list-message{
  min-height:0;
  margin-bottom:10px;
}

@media(max-width:640px){
  .admin-grid{
    display:block;
  }

  .sidebar{
    display:none;
  }

  .admin-menu-mobile{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin-bottom:14px;
  }

  .admin-menu-mobile .btn{
    width:100%;
    min-width:0;
    padding:10px 7px;
    font-size:13px;
  }

  .admin-menu-mobile .admin-menu-logout{
    grid-column:1 / -1;
  }

  .admin-list-heading{
    display:block;
  }

  .admin-date-field{
    width:170px;
    max-width:100%;
    margin-top:12px;
  }

  /* 管理者画面で共通利用する日付欄。追加時はHTMLへこのクラスを付けるだけで対応する。 */
  .admin-mobile-date-input{
    width:170px;
    min-width:0;
    max-width:100%;
    min-height:40px;
    padding:8px 7px;
    font-size:14px;
  }

  .admin-search{
    grid-template-columns:1fr;
  }

  .confirmation-detail-row{
    grid-template-columns:1fr;
    gap:4px;
  }

  .detail-grid{
    grid-template-columns:minmax(88px, 32%) minmax(0, 1fr);
  }
}

/* Fail closed during auth bootstrap and after role change, independent of URL hash. */
body[data-access-role="none"] main > section:not(#login):not(#adminlogin):not(#auth-password):not(#auth-recovery):not(#auth-signup),
body[data-access-role="company"] main > section[id^="admin"],
body[data-access-role="company"] #reception,
body[data-access-role="admin"] main > section[id^="customer"],
body[data-access-role="reception"] main > section:not(#reception):not(#login):not(#adminlogin):not(#auth-password):not(#auth-recovery){display:none!important;}
[hidden]{display:none!important;}

#accountList{white-space:pre-wrap;overflow-wrap:anywhere;}

/* Application status has no business identity. CSS is display only; RLS/RPC enforce authorization. */
body[data-access-role="none"] main > section#company-status {display:none!important;}
body[data-access-role="application"] main > section:not(#company-status):not(#login):not(#auth-recovery):not(#auth-password) {display:none!important;}