/* === Reset & Base === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #121212;
    --bg-surface: #1e1e1e;
    --bg-card: #2a2a2a;
    --bg-pressed: #333;
    --bg-input: #3a3a3a;
    --text: #e0e0e0;
    --text-secondary: #a0a0a0;
    --primary: #1976d2;
    --primary-light: #42a5f5;
    --boarding: #1976d2;
    --boarding-bg: #1a3a5c;
    --boarding-label: #42a5f5;
    --alighting: #e65100;
    --alighting-bg: #4a2000;
    --alighting-label: #ff8a50;
    --danger: #f44336;
    --success: #4caf50;
    --border: #333;
    --radius: 12px;
    --radius-sm: 8px;
}

/* ライトテーマ（Issue #68）: 日中屋外での視認性確保。黒背景は直射日光下で
   反射により見づらくなるため、高コントラストなライトテーマを手動切替で選択
   できるようにする。切替はindex.html（乗務員向けカウント画面）のみに実装し、
   デフォルトは従来通りダークテーマのまま変更しない。
   --boarding-label/--alighting-labelは薄い背景色（--boarding-bg/--alighting-bg）
   の上に乗るラベル文字色のため、通常のアクセント色（--boarding/--alighting）を
   そのまま使うとWCAG AA(4.5:1)未達になる。背景色に対して個別にコントラストを
   検証した濃い色を設定している（外部レビュー指摘、node-reviewerセルフレビュー）。 */
:root[data-theme="light"] {
    --bg: #f5f5f5;
    --bg-surface: #ffffff;
    --bg-card: #ffffff;
    --bg-pressed: #d8d8d8;
    --bg-input: #eeeeee;
    --text: #1a1a1a;
    --text-secondary: #555555;
    --primary: #1565c0;
    --primary-light: #1976d2;
    --boarding: #1565c0;
    --boarding-bg: #d6e7fa;
    --boarding-label: #0d4d8c; /* --boarding-bg上で約6.8:1 */
    --alighting: #c1440e;
    --alighting-bg: #fbe0d0;
    --alighting-label: #9c3610; /* --alighting-bg上で約5.7:1 */
    --danger: #c62828;
    --success: #2e7d32;
    --border: #cccccc;
    --count-btn-border: #333333;
}

[hidden] {
    display: none !important;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

/* === Screens === */
.screen {
    display: none;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

.screen.active {
    display: flex;
}

/* === Header === */
.header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    min-height: 52px;
}

.header-title {
    font-size: 1.1rem;
    font-weight: 600;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-icon {
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.4rem;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Issue #203: #link-adminは<a>タグのため、ラベル追加でブラウザ標準の
       下線が付いてしまう（元はアイコンのみで表示されていなかった） */
    text-decoration: none;
}

.btn-icon:active {
    background: var(--bg-card);
}

/* Issue #203: タブレット操作ではtitle属性のツールチップが機能しないため、
   ヘッダーのアイコンは常時ラベルテキストを表示する（.btn-iconと併用） */
.btn-icon-labeled {
    flex-direction: column;
    gap: 2px;
    min-width: 44px;
    padding: 4px 6px;
}

.btn-icon-label {
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
}

/* Issue #203: 使用頻度の低いアイコン（本日の記録修正・GPS設定・テーマ切替）を
   「その他」メニューへ集約し、ヘッダーの常時表示アイコン数を絞る */
.header-more-wrap {
    position: relative;
}

.header-more-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    padding: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.header-more-menu .btn-icon {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 8px 12px;
}

.header-more-menu .btn-icon-label {
    font-size: 0.9rem;
    white-space: nowrap;
}

/* === Content === */
.content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}

/* === Login ===
   Issue #202: devguide-toshin（Toshin-unyu/devguide-toshin, shared/design-internal.md）の
   カード型ログイン + .field/.input-wrap 構造を参考にoffice.html側（既に同ガイド準拠）と
   構造を統一する。色トークンはダーク基調の本アプリ自身のもの（--bg-surface/--border等）を
   使い続け、ガイドの値そのもの（Cream等）へは寄せない（アプリごとに値は調整可、名前のみ
   共通化するという同ガイド§2の方針）。
   運転手はタブレットで操作するため、ガイド§6の業務密度優先寸法（行高36px/input28px）より
   ひとまわり大きいタッチしやすいサイズにする（ユーザー指示、2026-09-09） */
.login-container-outer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 24px;
}

.login-container {
    width: 100%;
    max-width: 420px;
    padding: 32px 28px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.login-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    text-align: center;
}

#login-form {
    width: 100%;
}

#login-form .field {
    display: grid;
    grid-template-columns: 92px 1fr;
    align-items: center;
    min-height: 56px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

/* :last-of-typeは"div"というタグ単位で判定されるため、後続に#login-error（div）が
   あるとパスワード欄のfieldが最後のdivにならず意図通りに効かない。隣接兄弟結合子で
   「直前にも.fieldがある.field」＝2番目のfieldを確実に指定する */
#login-form .field + .field {
    border-bottom: none;
    margin-bottom: 16px;
}

#login-form .field label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
}

#login-form .field .input-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
}

#login-form .input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    font-size: 1.05rem;
    font-family: inherit;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}

#login-form .input:focus {
    border-color: var(--primary);
    outline: none;
}

/* === Forms === */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    font-family: inherit;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    outline: none;
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--primary);
}

.form-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 6px;
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: opacity 0.15s;
}

.btn:active {
    opacity: 0.8;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-icon:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-secondary {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-large {
    padding: 16px 24px;
    font-size: 1.15rem;
}

/* === Route List === */
.user-greeting {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.route-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.route-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--bg-card);
    border-radius: var(--radius);
    cursor: pointer;
    border: 1px solid var(--border);
    transition: background 0.15s;
}

.route-card:active {
    background: var(--bg-pressed);
}

.route-card-name {
    font-size: 1.1rem;
    font-weight: 600;
}

.route-card-info {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.route-card-arrow {
    font-size: 1.2rem;
    color: var(--text-secondary);
}

/* === Count Screen ===
   縦置き利用を基本前提としてレイアウトする（Issue #67）。横向き利用時の
   細かい調整は下部の landscape ブロックで維持するが、優先度は縦置きより低い。 */
.count-content {
    display: flex;
    flex-direction: column;
    padding: 8px 16px;
    gap: 6px;
    overflow: hidden;
}

.stop-indicator {
    text-align: center;
    padding: 0;
}

.stop-progress {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.stop-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* バス停名は運転中に一瞬で視認できることが最優先のため、画面内で最も
   目立つ要素として大きく表示する（現場からの要望、2026-07-31キックオフ）。 */
.stop-name {
    display: block;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: left;
}

.btn-clear-count {
    flex-shrink: 0;
}

/* === Count Columns === */
.count-columns {
    display: flex;
    gap: 10px;
    flex: 1;
    min-height: 0;
    /* 通常運用ではここが縮小せず全内容が収まる設計にした（Issue #67で
       ＋/－ボタンを横並び化し縦方向の必要量を削減）。ただしごく小さい端末や
       極端な条件（複数バナー同時表示等）ではなお不足しうるため、視覚的な
       重なり・要素消失を防ぐフェイルセーフとしてoverflow-y:autoは維持する
       （Issue #39由来）。 */
    overflow-y: auto;
}

.count-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 8px;
    border-radius: var(--radius);
    background: var(--bg-surface);
}

.count-column.boarding {
    border: 2px solid var(--boarding);
    background: var(--boarding-bg);
}

.count-column.alighting {
    border: 2px solid var(--alighting);
    background: var(--alighting-bg);
}

.count-label {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.count-column.boarding .count-label {
    color: var(--boarding-label);
}

.count-column.alighting .count-label {
    color: var(--alighting-label);
}

.count-value {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* 人数入力方式の切替トグル（Issue #142）。数字表示部（.count-value）の
   タップ判定が小さくシビアという現場指摘（2026-08-27実機検証）を受け、
   「都度モーダルを開く」方式から「常時どちらかのUIを表示する」方式へ変更。
   選択はlocalStorageに保存し常にそのモードを維持する。 */
.count-mode-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.count-mode-btn {
    flex: 1;
    padding: 8px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.count-mode-btn[aria-pressed="true"] {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

/* 直接入力モードのインライン数字盤。モーダルを挟まず常時表示し、数字タップは
   即座に1桁で上書き、+10は現在値に加算する（Issue #142）。誤入力対策は
   モーダル時代の「確定操作必須」から「Cボタンで即クリアできる」方式に変更した
   （常時表示のため確定操作を挟むと操作数がかえって増えるため）。 */
.inline-numpad {
    width: 100%;
}

.inline-numpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.inline-numpad-btn {
    height: 44px;
    min-height: 44px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
}

.inline-numpad-btn:active {
    background: var(--bg-pressed);
}

.inline-numpad-btn-clear {
    color: var(--text-secondary);
}

.inline-numpad-btn-plus10 {
    font-size: 1rem;
    color: var(--primary);
    border-color: var(--primary);
}

/* ＋/－ボタンは縦積みではなく横並びにし、1カラムあたりの縦方向の必要量を
   大きく削減する（Issue #67）。誤タップ訂正用の－は使用頻度が低いため、
   主操作の＋（80px+を維持）より小さいサイズに留めて幅を節約する。
   一時期「＋が常に2カラムの境界寄りに来る」よう乗車・降車で並び順を
   左右非対称にしたことがあったが、運転中の反射的な操作ではボタン位置が
   画面によって変わらない一貫性の方が重要との現場フィードバックにより、
   乗車・降車とも「－左／＋右」（数量カウンターの一般的な慣習）に統一した
   （2026-08-03）。 */
.count-btn-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.count-btn {
    /* ライトテーマ（Issue #86）: マイナスボタンが背景色（--bg-card）と同化し、
       プラスボタンは輪郭がぼやけて見えるという実車検証での指摘に対応。
       ダークテーマでは背景とのコントラストが元々十分なため、--count-btn-border
       はデフォルトtransparentとし、ライトテーマでのみ黒系の縁取りを与える */
    border: 2px solid var(--count-btn-border, transparent);
    border-radius: var(--radius);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}

.count-btn:active {
    transform: scale(0.93);
}

.count-btn-plus {
    flex: 1;
    height: 104px;
    min-height: 104px;
    font-size: 2rem;
    /* 常に.count-column.boarding/.alightingの子として使われるため下の2ルールで
       上書きされる（実質到達しないフォールバック）。テーマ変数と揃えておく */
    background: var(--bg-card);
    color: var(--text);
}

.count-column.boarding .count-btn-plus {
    background: var(--boarding);
}

.count-column.alighting .count-btn-plus {
    background: var(--alighting);
}

.count-btn-minus {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    flex-shrink: 0;
    font-size: 1.4rem;
    background: var(--bg-card);
    color: var(--text-secondary);
}

.count-btn-minus:active {
    background: var(--bg-pressed);
}

/* 車いす利用者のワンタップ記録ボタン（Issue #57）。数量ではなく真偽値の
   トグルのため、＋/－ボタンより小さい専用の横長ボタンとして下に配置する。
   「1トリップにつき1名まで」の制約はJS側（他バス停で既に記録済みなら
   disabled）で表現し、有効化中は.activeクラスで強調表示する。 */
.wheelchair-btn {
    width: 100%;
    height: 30px;
    min-height: 30px;
    margin-top: 2px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    /* Issue #84: テキスト表示から国際的な車いすマーク（SVGアイコン）表示に変更。
       運転中の視認・判別のしやすさを優先し、アクセシブルネームはaria-label/title
       （HTML側）で確保する */
    display: flex;
    align-items: center;
    justify-content: center;
}

.wheelchair-btn.active {
    border-color: var(--success);
    background: var(--success);
    color: #fff;
}

.wheelchair-btn:disabled {
    /* 「なぜ押せないか」を判読できるよう、非活性でも文字の視認性を確保する
       （0.35だと背景とのコントラストが不足するとの外部レビュー指摘を反映） */
    opacity: 0.55;
    cursor: not-allowed;
}

/* Nav button */
.btn-nav {
    background: var(--success);
    color: #fff;
    font-size: 1.2rem;
    padding: 16px;
    flex-shrink: 0;
}

.btn-nav.btn-finish {
    background: var(--danger);
}

.btn-all-alighting {
    background: var(--alighting-bg);
    color: var(--alighting);
    border: 1px solid var(--alighting);
    flex-shrink: 0;
    margin-bottom: 8px;
}

.count-nav-row {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.count-nav-row .btn-nav {
    flex: 3;
    width: auto;
}

.btn-nav-prev {
    flex: 1;
    padding: 16px 8px;
    font-size: 1rem;
    white-space: nowrap;
}

.next-stop-hint {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* === Status Bar === */
.status-bar {
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.status-bar .negative {
    color: var(--danger);
    font-weight: 700;
}

/* === GPS Status === */
.gps-status {
    color: var(--text-secondary);
}

.gps-status-acquiring {
    color: var(--primary-light);
}

.gps-status-on {
    color: var(--success);
    font-weight: 700;
}

/* === GPS Suggestion Banner ===
   position:fixedでヘッダー直下に浮かせて重ねる。通常のflowから外れているため
   下の要素を覆ってしまうが、表示中はJS側（showGpsSuggestion）でstop-indicator
   にバナー高さ分のmargin-topを付与しスペースを確保するため、バス停名・乗車/降車
   ラベルとも隠れない（Issue #49）。 */
.gps-suggestion {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--boarding-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid var(--primary);
}

.gps-suggestion span {
    flex: 1;
    font-size: 0.95rem;
}

/* === GPS Settings === */
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.settings-row input[type="checkbox"],
.settings-row input[type="radio"] {
    width: 22px;
    height: 22px;
    accent-color: var(--primary);
}

/* === Confirm Screen === */
.summary-totals {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.summary-total-card {
    flex: 1;
    padding: 12px;
    border-radius: var(--radius-sm);
    text-align: center;
}

.summary-total-card.boarding {
    background: var(--boarding-bg);
    border: 1px solid var(--boarding);
}

.summary-total-card.alighting {
    background: var(--alighting-bg);
    border: 1px solid var(--alighting);
}

.summary-total-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.summary-total-value {
    font-size: 2rem;
    font-weight: 700;
}

/* 定期券等発行数入力（Issue #59） */
.ticket-issuance-section {
    margin-bottom: 16px;
}

.ticket-issuance-section .section-title {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.ticket-issuance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ticket-issuance-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.ticket-issuance-grid input {
    padding: 10px;
    font-size: 1rem;
    font-family: inherit;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}

/* 天候手動修正（Issue #58） */
.weather-section {
    margin-bottom: 16px;
}

.weather-section .section-title {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.weather-quick-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.weather-quick-buttons .btn {
    flex: 1;
}

#weather-condition {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    font-family: inherit;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    box-sizing: border-box;
}

.table-wrapper {
    overflow-x: auto;
    margin-bottom: 16px;
}

.summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.summary-table th,
.summary-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.summary-table th {
    background: var(--bg-surface);
    font-weight: 600;
    position: sticky;
    top: 0;
}

.summary-table td:first-child {
    text-align: left;
}

/* Issue #62: 修正モードの乗車・降車inputと車いすチェックボックスがスマホ幅で
   画面外にはみ出さないよう、必要最小限の幅に固定する */
.summary-table input[type="number"] {
    width: 3.2em;
    padding: 4px;
    text-align: center;
}

.summary-table td label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    font-size: 0.8rem;
}

.summary-table .negative {
    color: var(--danger);
    font-weight: 700;
}

#btn-send {
    margin-bottom: 8px;
}

/* === Error === */
.error-message {
    color: var(--danger);
    font-size: 0.9rem;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: rgba(244, 67, 54, 0.1);
    border-radius: var(--radius-sm);
}

/* Issue #62: 運行詳細のインライン修正保存成功メッセージ。error-messageの色違い */
.success-message {
    color: var(--success);
    font-size: 0.9rem;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: var(--radius-sm);
}

/* === Loading === */
.loading {
    text-align: center;
    padding: 24px;
    color: var(--text-secondary);
}

/* === Overlay === */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.overlay-content {
    text-align: center;
    color: var(--text);
}

/* 走行中ロック（Issue #72）: 確認ダイアログ等の他のオーバーレイより必ず
   手前に表示し、走行中は一切の操作を受け付けないことを保証する */
.driving-lock-overlay {
    z-index: 300;
    background: rgba(0, 0, 0, 0.85);
    flex-direction: column;
    gap: 16px;
}

.btn-driving-lock-emergency {
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    font-size: 0.85rem;
    padding: 10px 20px;
    /* 長押し中にiOS/Androidの単語選択・コンテキストメニューが割り込むと
       pointercancelが発火し長押しタイマーが中断されるため抑止する（外部レビュー指摘） */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}

.driving-lock-message {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--danger);
    margin-bottom: 8px;
}

.driving-lock-submessage {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

/* === Confirm Dialog === */
.confirm-dialog {
    width: 100%;
    max-width: 360px;
    max-height: 80vh;
    overflow-y: auto;
    margin: 0 24px;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.confirm-message {
    color: var(--text);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    white-space: pre-wrap;
}

.confirm-actions {
    display: flex;
    gap: 12px;
}

.confirm-actions .btn {
    flex: 1;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 12px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* === Toast === */
.toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    background: var(--success);
    color: #fff;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 600;
    z-index: 200;
    animation: toast-in 0.3s ease-out;
    pointer-events: none;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* === Responsive: larger tablets === */
@media (min-width: 600px) {
    .count-btn-plus {
        height: 128px;
        min-height: 128px;
        font-size: 2.4rem;
    }

    .count-btn-minus {
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
        font-size: 1.6rem;
    }

    .inline-numpad-btn {
        height: 56px;
        min-height: 56px;
        font-size: 1.4rem;
    }

    .count-value {
        font-size: 4.5rem;
    }

    .stop-name {
        font-size: 2.4rem;
    }
}

/* === Landscape tweaks ===
   縦置きが基本前提（Issue #67）となったため、以下は優先度を下げた維持のみの
   調整とする。＋/－ボタンを横並び化したことで、この対応がなくても以前より
   縦方向の必要量が減っているが、既存の横向き利用が壊れないよう最小限残す。 */
@media (orientation: landscape) and (max-height: 500px) {
    .count-content {
        padding: 8px 16px;
        gap: 8px;
    }

    .stop-indicator {
        padding: 4px 0;
    }

    .stop-name {
        font-size: 1.4rem;
    }

    .count-columns {
        gap: 8px;
    }

    .count-column {
        padding: 6px 8px;
        gap: 4px;
    }

    .count-label {
        font-size: 0.85rem;
    }

    .count-btn-plus {
        height: 80px;
        min-height: 80px;
        font-size: 1.6rem;
    }

    .count-btn-minus {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        font-size: 1.1rem;
    }

    .count-value {
        font-size: 2.2rem;
    }

    .inline-numpad-btn {
        height: 32px;
        min-height: 32px;
        font-size: 0.9rem;
    }

    .count-mode-toggle {
        margin-bottom: 4px;
    }

    .count-mode-btn {
        padding: 4px;
        font-size: 0.75rem;
    }

    .wheelchair-btn {
        height: 26px;
        min-height: 26px;
        font-size: 0.7rem;
    }

    .btn-nav {
        padding: 10px;
        font-size: 1rem;
    }
}

/* さらに低い高さ（極端に低いランドスケープ端末）では、count-btn自体も縮小する。
   上のmax-height:500pxブロックより後（CSS上で下）に置くことで、両方に該当する
   端末（高さ400px以下）でもこちらの値が後勝ちで適用される。このブロックを
   500pxブロックより前に移動すると縮小が効かなくなるため順序を変えないこと */
@media (orientation: landscape) and (max-height: 400px) {
    .count-btn-plus {
        height: 60px;
        min-height: 60px;
        font-size: 1.2rem;
    }

    .count-btn-minus {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        font-size: 1rem;
    }

    .count-value {
        font-size: 1.8rem;
    }

    .inline-numpad-btn {
        height: 26px;
        min-height: 26px;
        font-size: 0.8rem;
    }

    .inline-numpad-grid {
        gap: 4px;
    }
}

/* === Offline Banner === */
.offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 6px 12px;
    font-size: 0.85rem;
    text-align: center;
    background: var(--success);
    color: #fff;
}

.offline-banner.offline-banner-offline {
    background: var(--danger);
}

/* === Update Banner ===
   新しいバージョンが検知された際に表示する更新案内。運行中（カウント中）に
   勝手にリロードすると入力中のデータが失われるため、ユーザーがボタンを押す
   まで自動更新はしない（Issue #51）。offline-bannerと重ならないよう下部に配置。 */
.update-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    font-size: 0.9rem;
    background: var(--bg-surface);
    border-top: 1px solid var(--primary);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.4);
}

.update-banner .btn {
    padding: 6px 16px;
    font-size: 0.85rem;
}

/* update-banner表示中は、ビューポート最下端にある.status-bar（カウント画面の
   車内人数・GPS状態・未送信件数）等が隠れないよう、アクティブ画面の下部に
   バナー高さ分のスペースを確保する。高さはJS側（showUpdateBanner）で
   --update-banner-heightに実測値をセットする。 */
body.update-banner-visible .screen.active {
    padding-bottom: var(--update-banner-height, 0px);
}

/* === App Version（Issue #228） ===
   ビルド時点のGitコミットハッシュを表示し、クリックで更新履歴（CHANGELOG.md）を
   別タブで開く。update-bannerと重なっても実害が小さい低頻度表示のため、
   ビューポート確保（--update-banner-height）の対象には含めない。 */
.app-version {
    position: fixed;
    bottom: 4px;
    right: 8px;
    z-index: 10;
    font-size: 10px;
    color: var(--text-secondary);
    opacity: 0.6;
    text-decoration: none;
}

.app-version:hover {
    opacity: 1;
}