/* driver.css
   ドライバーPWA(スマホ優先)。mockup.html の画面構成・部品をそのまま踏襲する。 */

body.driver-body {
  background: var(--secondary);
  min-height: 100vh;
}

.app-shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
}

.app-screen { display: none; flex-direction: column; flex: 1; }
.app-screen.active { display: flex; }

/* T-0026: オフライン状態・未送信キューのバナー(全画面共通、上部固定) */
.offline-banner {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: #C2561A;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.offline-banner button {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  min-height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.15);
  color: #fff;
  cursor: pointer;
}
.offline-cached-note {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #FFF3E0;
  color: #8A4B00;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: var(--secondary);
  color: var(--on-secondary);
}
.header-eyebrow { margin: 0 0 2px; font-size: 13px; opacity: .85; }
.header-title { margin: 0; font-size: 20px; font-weight: 700; }
.header-title-sm { margin: 0; font-size: 18px; font-weight: 700; flex: 1; text-align: center; }
.header-count { font-size: 13px; opacity: .85; min-width: 40px; text-align: right; }

.screen-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; flex: 1; }

/* ログイン画面 */
.login-body {
  padding: 40px 24px;
  justify-content: center;
  gap: 28px;
  background: linear-gradient(180deg, var(--secondary) 0%, var(--secondary) 38%, var(--bg-page) 38%);
  min-height: 100vh;
}
.brand { text-align: center; color: var(--on-secondary); }
.brand-mark {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 22px;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.brand-name { margin: 0; font-size: 24px; font-weight: 700; }
.brand-sub { margin: 4px 0 0; font-size: 14px; opacity: .9; }
.login-form { background: var(--surface); border-radius: var(--radius-card); padding: 24px 20px; box-shadow: var(--shadow-card); }
.login-note { text-align: center; font-size: 13px; color: var(--text-secondary); margin: 0; }

/* ホーム */
.today-card { display: flex; flex-direction: column; gap: 10px; }
.today-summary { margin: 0; font-size: 16px; }
.today-summary strong { font-size: 20px; color: var(--primary-dark); }
html[data-theme="dark"] .today-summary strong { color: var(--primary); }

.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.menu-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: inherit;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  min-height: 100px;
}
.menu-icon { font-size: 26px; }
.menu-label { font-size: 14px; font-weight: 700; text-align: center; line-height: 1.4; }

/* 配送一覧 */
.list-body { gap: 12px; }
.delivery-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px;
  text-align: left;
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
  display: block;
  width: 100%;
}
.delivery-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.delivery-time { font-size: 13px; color: var(--text-secondary); font-weight: 700; }
.delivery-name { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.delivery-addr { margin: 0; font-size: 14px; color: var(--text-secondary); }

/* T-0024: 当日ルート(配送+経由地の統合並び順)。カードは配送/経由地で明確に区別する。 */
.route-stop {
  display: flex;
  align-items: stretch;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px;
}
.route-stop-waypoint {
  background: #FFF8E1;
  border-left: 5px solid #F4A825;
}
.route-stop-waypoint.route-stop-depot { border-left-color: #2E7D32; background: #EEF7EF; }
.route-stop-body { flex: 1; min-width: 0; text-align: left; }
.route-stop-icon { font-size: 22px; margin-right: 6px; }
.route-stop-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.route-stop-sub { margin: 0; font-size: 13px; color: var(--text-secondary); }
.route-stop-visit-check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-top: 8px; }
.route-stop-visit-check input[type="checkbox"] { width: 26px; height: 26px; }
.route-stop-controls { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; justify-content: center; }
.route-move-btn {
  min-width: 56px;
  min-height: 56px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-page);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}
.route-move-btn:disabled { opacity: 0.35; }
.route-remove-btn {
  min-width: 56px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--danger-text);
  background: var(--surface);
  color: var(--danger-text);
  font-size: 13px;
  font-weight: 700;
}
.route-add-waypoint-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 14px;
  margin-top: 12px;
}
.route-add-waypoint-panel select { width: 100%; margin-bottom: 10px; min-height: 48px; }

/* T-0025: 出発/帰着点検チェックリスト */
.inspection-checklist { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 14px; }
.inspection-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  border-radius: 10px;
  background: var(--bg-page);
  font-size: 15px;
}
.inspection-check-row input[type="checkbox"] { width: 28px; height: 28px; flex-shrink: 0; }

/* 配送詳細(T-0016: 左=配送情報/右=操作の2ペイン構造。既定は縦積み、ランドスケープで横並び) */
.detail-layout { display: flex; flex-direction: column; gap: 16px; }
.detail-pane-info, .detail-pane-actions { display: flex; flex-direction: column; gap: 16px; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 0; padding: 0; }
.detail-grid div { background: var(--bg-page); border-radius: 10px; padding: 10px; }
.detail-grid dt { font-size: 12px; color: var(--text-secondary); margin: 0 0 4px; }
.detail-grid dd { font-size: 15px; font-weight: 700; margin: 0; }

.quantity-value { font-size: 32px; font-weight: 700; min-width: 130px; text-align: center; }
.quantity-value .unit { font-size: 16px; font-weight: 700; color: var(--text-secondary); margin-left: 4px; }
.input-hint { margin: 12px 0 0; font-size: 13px; color: var(--text-secondary); text-align: center; }

/* 実数量入力: テンキー方式(ステッパー廃止) */
.qty-planned-ref {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
}
.qty-planned-ref strong { font-size: 16px; color: var(--text-primary); }

.qty-keypad-display {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-page);
  border-radius: var(--radius-card);
  padding: 14px 12px;
  margin-bottom: 14px;
}
.qty-keypad-value-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  overflow: hidden;
}
.qty-keypad-value {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.qty-keypad-value[data-empty="true"] { color: var(--text-secondary); }
.qty-keypad-display .unit { font-size: 16px; font-weight: 700; color: var(--text-secondary); flex-shrink: 0; }
.qty-key-back { flex-shrink: 0; }

.qty-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.qty-key {
  min-height: 60px;
  min-width: 44px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.qty-key:active { background: var(--bg-page); }
.qty-key-back {
  width: 48px;
  height: 48px;
  min-height: 44px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  background: var(--surface);
  color: var(--primary);
  font-size: 20px;
}
.qty-key-clear { color: var(--danger-text); border-color: var(--danger-text); }

/* 現金受取(T-0014): タップしやすい大きめのチェックボックス */
.cash-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  min-height: 44px;
  cursor: pointer;
}
.cash-toggle input[type="checkbox"] {
  width: 24px;
  height: 24px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

/* 追加商品一覧(T-0014) */
.extra-items-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.extra-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-page);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}

.sign-locked-note { text-align: center; color: var(--text-secondary); font-size: 13px; margin: 8px 0 0; }

.detail-actions { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; }
.detail-actions .btn { flex: 1; }

.zero-reason-field { margin-top: 12px; }

/* サインの入口(T-0016): タップで全画面モーダルを開く */
.sign-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 110px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-page);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sign-trigger-icon { font-size: 28px; }

/* サイン全画面モーダル(T-0016): 画面全体を使って大きくサインできる。
   横向きでの記入を想定し、キャンバスは横長(landscape)の縦横比に固定する。 */
.sign-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--surface);
  flex-direction: column;
}
.sign-modal.open { display: flex; }
.sign-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--secondary);
  color: var(--on-secondary);
  flex-shrink: 0;
}
.sign-modal-title { font-weight: 700; font-size: 16px; }
.sign-modal-canvas-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--bg-page);
}
.sign-canvas-full {
  width: 94vw;
  max-width: 900px;
  aspect-ratio: 2.2 / 1;
  max-height: 72vh;
  background: #FFFFFF;
  border: 2px dashed var(--border);
  border-radius: 12px;
  touch-action: none;
  cursor: crosshair;
}
.sign-modal-footer {
  display: flex;
  gap: 12px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  flex-shrink: 0;
}
.sign-modal-footer .btn { flex: 1; }

@media (min-width: 620px) {
  .menu-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .list-body { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-content: start; }
  .login-body { padding: 60px 80px; }
  .login-form { max-width: 420px; margin: 0 auto; width: 100%; }
}

/* T-0016: 横向き(ランドスケープ)最適化。スマホ・タブレットを横にして使う前提で、
   配送詳細を左(配送情報)/右(テンキー・追加商品・現金受取・サイン等の操作)の2ペインにする。
   縦持ち(portrait)では対象外となり、既存どおり1カラムで縦積みのまま崩れない。 */
@media (orientation: landscape) and (min-width: 560px) {
  .app-shell { max-width: 960px; }
  .detail-layout { flex-direction: row; align-items: flex-start; }
  .detail-pane-info { flex: 0 0 40%; position: sticky; top: 0; }
  .detail-pane-actions { flex: 1; min-width: 0; }
  .detail-actions { flex-direction: row; }
}

/* 横向きだが縦幅が小さいスマホ(横持ちの一般的なスマホ)向けの詰め調整。
   タップ領域は44px以上を維持する(T-0013の方針を踏襲)。 */
@media (orientation: landscape) and (max-height: 480px) {
  .screen-header { padding: 10px 16px; }
  .screen-body { padding: 12px; gap: 12px; }
  .detail-grid { grid-template-columns: repeat(2, 1fr); }
  .qty-key { min-height: 44px; font-size: 20px; }
  .qty-keypad { gap: 6px; }
  .sign-canvas-full { max-height: 60vh; }
}