/*
 * office.css — 事務側統合画面（office.html）専用のデザイン基盤
 *
 * Toshin 共通デザインガイドライン（コーポレート層）準拠（Issue #238）。正本:
 *   - Toshin-unyu/devguide-toshin shared/design-public.md（色・角丸・影・各コンポーネント仕様）
 *   - 同 shared/toshin-brand.md（上位文書。§4.4 テーマ構造・ヘッダー帯は primary 単色が既定）
 * 将来の社外展開を見据え、旧 TCS Design Spec（事業ブランド層・社内業務UI）から移行した。
 *
 * 色の使い分け（design-public.md §1）:
 *   Primary  #006f5e … ヘッダー・主要ボタン・アクティブ状態・強調
 *   Secondary #006888 … リンク・情報表示などの副次要素
 * コンポーネント側に色の直値を書かない（toshin-brand.md §4.5 実装要件3）。
 * 色を変えるときは下の :root / ダークテーマのトークンだけを差し替える。
 *
 * 既存の style.css（乗務員側 index.html）とは独立しており、乗務員側には影響しない。
 * テーマ: ライトがデフォルト（:root）、html[data-theme="dark"] でダーク。
 * localStorage キーは office-theme（乗務員側の theme キーとは別管理）。
 */

/* ========================================
 * ルートトークン（テーマ非依存: フォント・影）
 * ======================================== */
:root {
    /* オンライン時は Noto Sans JP（Webフォント）、取得できない環境ではガイド §7.1 のシステムフォントへ落とす */
    --font-sans: 'Noto Sans JP', 'Noto Sans CJK JP', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'Yu Gothic', sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* design-public.md §9.2 */
    --shadow-header: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-toolbar: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-modal: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* ========================================
 * 文字サイズ調整（Issue #170）
 * body.office-active（office.jsのshowScreen()がoffice画面表示中のみ付与）に対して
 * zoomを適用する。zoomは子孫でzoom:1を指定しても祖先のzoomを完全には打ち消さない
 * 非標準の挙動があるため、html全体に適用して#screen-loginで打ち消す方式は採らない
 * （ログイン画面にも影響してしまう実機不具合が確認済み）。モーダル・オーバーレイ・
 * トースト等（すべてbody直下の兄弟要素）もbodyの子孫として拡大対象に含まれる。
 * Firefoxはzoom非対応のため標準表示のまま。
 * ======================================== */
html[data-font-scale="large"] body.office-active { zoom: 1.15; }
html[data-font-scale="xlarge"] body.office-active { zoom: 1.3; }

/* ========================================
 * ライトテーマ（デフォルト）
 * ======================================== */
:root {
    /* ブランド色（design-public.md §1.1 / §1.2 / §11） */
    --color-primary: #006f5e;          /* Primary-600 */
    --color-primary-dark: #005a4b;     /* Primary-700（ホバー） */
    --color-primary-light: #e6f7f5;    /* Primary-50（淡背景・選択状態） */
    --color-primary-ring: rgba(0, 111, 94, 0.2);
    --color-on-primary: #ffffff;
    --color-on-fill: #ffffff;          /* 塗りボタン（danger/sub/secondary）上の文字 */
    --color-secondary: #006888;        /* Secondary-600（リンク・情報表示・副次ボタン） */
    --color-secondary-dark: #005470;   /* Secondary-700（ホバー） */

    /* セマンティック色（§1.4） */
    --color-error: #ef4444;
    --color-error-dark: #dc2626;
    --color-warning: #f59e0b;
    --color-warning-dark: #d97706;
    --sem-success-bg: #dcfce7;
    --sem-success-text: #166534;
    --sem-error-bg: #fee2e2;
    --sem-error-text: #991b1b;
    --sem-error-border: #fecaca;

    /* ニュートラル（§1.5） */
    --bg-app: #f5f5f5;
    --bg-surface: #ffffff;
    --bg-surface-2: #f8f9fa;
    --bg-segment: #f0f2f5;
    --bg-row-hover: #f1f3f5;
    --bg-input: #ffffff;
    --bg-header: var(--color-primary);
    --header-btn-bg: rgba(255, 255, 255, 0.2);      /* §2.3 */
    --header-btn-hover: rgba(255, 255, 255, 0.3);

    --text-primary: #333333;
    --text-secondary: #666666;
    --text-label: #555555;

    --border-subtle: #eeeeee;
    --border-base: #dddddd;
    --border-input: #dddddd;

    /* 役割トークン（コンポーネントはこちらを参照する） */
    --ui-accent: var(--color-primary);            /* 下線・ボーダー・チェック等のアクセント */
    --ui-accent-text: var(--color-primary-dark);  /* 淡背景・白背景上の強調文字（§13.2/13.3 は primary-700） */
    --ui-accent-soft: var(--color-primary-light);
    --link: var(--color-secondary);
    --shadow-focus: 0 0 0 2px var(--color-primary-ring);

    /* ボタン（§4.2） */
    --btn-warning-text: #212529;
    --btn-secondary-bg: #757575;
    --btn-secondary-hover: #616161;
    --btn-cancel-bg: #e0e0e0;
    --btn-cancel-text: #333333;
    --btn-disabled-bg: #cccccc;
    --btn-disabled-text: #ffffff;

    --badge-neutral-bg: #eeeeee;
    --toast-bg: #333333;
    --toast-text: #ffffff;
}

/* ========================================
 * ダークテーマ
 * ライト/ダークはカラー選択と直交する軸として持つ（toshin-brand.md §4.5-5）。
 * 地色は同 §4.6 採用条件のダーク地 #0e181d、アクセントは Primary-300（対地 4.5:1 以上）。
 * 塗りの Primary-600 は白文字で AA を満たすためダークでもそのまま使う。
 * ======================================== */
html[data-theme="dark"] {
    /* 日付ピッカーのアイコン・select・チェックボックス等のブラウザ標準部品もダーク描画にする */
    color-scheme: dark;

    --sem-success-bg: #064e3b;
    --sem-success-text: #a7f3d0;
    --sem-error-bg: #7f1d1d;
    --sem-error-text: #fecaca;
    --sem-error-border: #b91c1c;
    --color-error-dark: #f87171;

    --bg-app: #0e181d;
    --bg-surface: #16242b;
    --bg-surface-2: #1f3138;
    --bg-segment: #0e181d;
    --bg-row-hover: #22333b;
    --bg-input: #1f3138;
    --bg-header: #0d3a32;

    --text-primary: #d7e5eb;
    --text-secondary: #8aa4af;
    --text-label: #a9bdc6;

    --border-subtle: #22333b;
    --border-base: #2b3f48;
    --border-input: #3e5764;

    --ui-accent: #66cfbe;                          /* Primary-300 */
    --ui-accent-text: #66cfbe;
    --ui-accent-soft: rgba(102, 207, 190, 0.15);
    --link: #4ab8d8;
    --color-primary-ring: rgba(102, 207, 190, 0.35);

    --btn-cancel-bg: #2b3f48;
    --btn-cancel-text: #d7e5eb;
    --btn-disabled-bg: #2b3f48;
    --btn-disabled-text: #6f8792;

    --badge-neutral-bg: #2b3f48;
    --toast-bg: #d7e5eb;
    --toast-text: #16242b;
}

/* スクリーンリーダー専用。視覚的には隠すがaria-labelledbyやラベル関連付けとして機能させる */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
 * リセット・基本
 * ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

/* .overlay等の一部クラスがdisplay:flexを直接指定しており、[hidden]属性と
   詳細度が同じため後勝ちで無視されてしまう（style.cssと同じ対策）。
   !importantで確実にhidden属性を優先させる。 */
[hidden] {
    display: none !important;
}

body {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    background: var(--bg-app);
    color: var(--text-primary);
    min-height: 100vh;
}

a {
    color: var(--link);
}

button {
    font-family: inherit;
    cursor: pointer;
}

input,
select,
textarea {
    font-family: inherit;
}

input[type="checkbox"] {
    accent-color: var(--ui-accent);
}

/* ========================================
 * 画面切替（.screen: ログイン⇔本体）
 * ======================================== */
.screen {
    display: none;
}

.screen.active {
    display: block;
}

/* ========================================
 * ヘッダー（design-public.md §2.2 サブページ型。帯は primary 単色: toshin-brand.md §4.4）
 * ======================================== */
.office-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-header);
    color: var(--color-on-primary);
    box-shadow: var(--shadow-header);
}

.office-header .header-title {
    font-size: 20px;
    font-weight: 700;
    margin-right: auto;
    white-space: nowrap;
}

/* §8.1 モバイル幅ではタイトルが折り返さないよう詰める */
@media (max-width: 700px) {
    .office-header {
        gap: 6px;
        padding: 10px 12px;
    }

    .office-header .header-title {
        font-size: 16px;
    }
}

/* §2.3 ホームリンクボタンと同じ半透明白の丸ボタン */
.office-header .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--header-btn-bg);
    color: var(--color-on-primary);
    transition: all 0.2s;
    /* Issue #203: 「カウント画面へ」は<a>タグのため、グローバルのa{color}に加え下線も付いてしまう */
    text-decoration: none;
}

.office-header .btn-icon:hover {
    background: var(--header-btn-hover);
}

/* 文字サイズ切替ボタン（Issue #170）。日本語2文字ラベル（標準/大/特大）のため
   固定36pxの丸ではなく可変幅のピル型にする。高さは他のアイコンボタンと揃える */
.office-header .btn-font-scale-toggle {
    width: auto;
    min-width: 36px;
    padding: 0 12px;
    border-radius: 18px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* Issue #203: タブレット操作ではtitle属性のツールチップが機能しないため、
   ヘッダーのアイコンは常時ラベルテキストを表示する（.btn-iconと併用）。
   ラベル付きは丸に収まらないため角丸8pxの矩形にする */
.office-header .btn-icon-labeled {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    width: auto;
    height: auto;
    min-width: 48px;
    padding: 5px 8px;
    border-radius: 8px;
}

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

/* ========================================
 * 大タブ（§13.3 下線タブ型: 選択 = border-bottom 3px primary-600 + 太字）
 * ======================================== */
.big-tabs {
    display: flex;
    gap: 2px;
    padding: 0 16px;
    background: var(--bg-surface);
    box-shadow: var(--shadow-toolbar);
    overflow-x: auto;
}

.big-tab {
    padding: 12px 20px;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s;
}

.big-tab:hover {
    color: var(--text-primary);
    background: var(--bg-row-hover);
}

.big-tab.active {
    color: var(--ui-accent-text);
    border-bottom-color: var(--ui-accent);
    font-weight: 700;
}

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

.big-tab-panel {
    display: none;
    padding: 16px;
    max-width: 1100px;
    margin: 0 auto;
}

.big-tab-panel.active {
    display: block;
}

/* ========================================
 * カード基本形（§13.1）
 * ======================================== */
.card,
.login-container,
.kpi {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
}

/* ========================================
 * ログイン画面
 * ======================================== */
.login-container {
    max-width: 400px;
    margin: 10vh auto 0;
    padding: 28px 24px;
}

.login-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}

/* ========================================
 * KPIカード（運行詳細の合計乗車・降車）
 * ======================================== */
.kpi .kpi-body {
    padding: 14px 18px;
}

.kpi .label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.kpi .value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ui-accent-text);
}

/* ========================================
 * フォーム（§5: ラベルは入力欄の上、入力欄は padding 12px / 角丸 8px）
 * ======================================== */
.form-body {
    display: flex;
    flex-direction: column;
}

.field {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}

/* 直下のlabelだけを項目ラベルとして扱う（.input-wrap内の.checkbox-labelは対象外） */
.field > label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-label);
    margin-bottom: 6px;
}

.field > label .req {
    color: var(--color-error-dark);
    font-weight: 700;
}

.field .input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* 高さは §5.1 の padding 12px + 1rem 行と同じ 48px に固定する
   （select・date・month はブラウザ既定の内部余白が異なり、paddingだけでは高さが揃わないため） */
.input {
    width: 100%;
    height: 48px;
    padding: 0 12px;
    font-size: 1rem;
    font-family: var(--font-sans);
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-input);
    border-radius: 8px;
    transition: all 0.2s;
}

.input:focus {
    outline: none;
    border-color: var(--ui-accent);
    box-shadow: var(--shadow-focus);
}

.input.input-mono {
    font-family: var(--font-mono);
}

.input.w-short { width: 120px; }
.input.w-med { width: 200px; }

textarea.input {
    height: auto;
    min-height: 72px;
    padding: 12px;
    resize: vertical;
}

/* ========================================
 * テーブル（外枠はカード基本形 §13.1、行 hover は §13.2 の #f1f3f5）
 * ======================================== */
.tcs-table-wrap {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow: auto;
    max-height: calc(100vh - 240px);
    max-height: calc(100dvh - 240px);
    overscroll-behavior: contain;
    box-shadow: var(--shadow-card);
}

.tcs-table {
    width: 100%;
    border-collapse: collapse;
}

.tcs-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 12px;
    background: var(--bg-surface-2);
    border-bottom: 1px solid var(--border-base);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left;
    white-space: nowrap;
}

.tcs-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.85rem;
    color: var(--text-primary);
    white-space: nowrap;
}

.tcs-table tbody tr:last-child td {
    border-bottom: none;
}

.tcs-table tbody tr:hover {
    background: var(--bg-row-hover);
}

.tcs-table tbody tr.inactive {
    opacity: 0.55;
}

.tcs-table .mono {
    font-family: var(--font-mono);
}

.tcs-table .negative {
    color: var(--sem-error-text);
    font-weight: 700;
}

/* 表内の入力欄（運行詳細の修正モード）は行の高さを抑える */
.tcs-table .input {
    height: 34px;
    padding: 0 8px;
    font-size: 0.85rem;
}

/* ========================================
 * ボタン（§4。.btn + variant 併記必須）
 * ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    transition: all 0.2s;
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

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

.btn-primary:hover {
    background: var(--color-primary-dark);
}

.btn-danger {
    background: var(--color-error);
    color: var(--color-on-fill);
}

.btn-danger:hover {
    background: var(--color-error-dark);
}

.btn-warning {
    background: var(--color-warning);
    color: var(--btn-warning-text);
}

.btn-warning:hover {
    background: var(--color-warning-dark);
}

/* Secondary-600（§1.2「副次ボタン」）。グレーのsecondaryと並ぶ場面で見分けを付けるための副次アクション */
.btn-sub {
    background: var(--color-secondary);
    color: var(--color-on-fill);
}

.btn-sub:hover {
    background: var(--color-secondary-dark);
}

.btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--color-on-fill);
}

.btn-secondary:hover {
    background: var(--btn-secondary-hover);
}

.btn-cancel {
    background: var(--btn-cancel-bg);
    color: var(--btn-cancel-text);
}

/* 表の操作列など、行内に複数並べる小型ボタン */
.btn-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
}

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

/* §4.3。各variantの:hoverより後に置き、無効時はホバー色に変わらないようにする */
.btn:disabled,
.btn:disabled:hover {
    background: var(--btn-disabled-bg);
    color: var(--btn-disabled-text);
    cursor: not-allowed;
}

/* ========================================
 * バッジ（§9.1 角丸10px / §7.2 11-12px。.badge + variant 併記必須）
 * ======================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.badge-pending {
    background: var(--badge-neutral-bg);
    color: var(--text-secondary);
}

.badge-confirmed {
    background: var(--sem-success-bg);
    color: var(--sem-success-text);
}

.badge-completed {
    background: var(--ui-accent-soft);
    color: var(--ui-accent-text);
}

/* ========================================
 * ドロップダウンメニュー（Issue #238。ダウンロード形式選択等、
 * ボタンを押してから選択肢を出す小規模なメニュー）
 * ======================================== */
.menu-wrap {
    position: relative;
    display: inline-block;
}

.menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    min-width: 180px;
    max-width: calc(100vw - 32px);
    background: var(--bg-surface);
    border: 1px solid var(--border-base);
    border-radius: 8px;
    box-shadow: var(--shadow-modal);
    overflow: hidden;
}

/* history-filter-actionsはflex-wrapで折り返すため、ボタンが右寄りに来ると
   left:0基準のメニューがビューポート右端からはみ出しうる（node-reviewer指摘） */
@media (max-width: 700px) {
    .menu {
        left: auto;
        right: 0;
    }
}

.menu-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    text-align: left;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
}

.menu-item:hover,
.menu-item:focus-visible {
    background: var(--bg-row-hover);
    outline: none;
}

/* ========================================
 * オーバーレイ・モーダル（§6）
 * ======================================== */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}

.modal {
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--bg-surface);
    border-radius: 12px;
    box-shadow: var(--shadow-modal);
    padding: 0 20px 20px;
}

@media (max-width: 700px) {
    .modal {
        max-width: 400px;
    }
}

/* モーダルヘッダー。.modalの左右paddingを負マージンで打ち消して全幅の帯にし、
   本文スクロール中も見出しが残るようstickyにする（HTML側にラッパー要素を増やさないため） */
.modal-title {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -20px 16px;
    padding: 16px 20px;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 1.1rem;
    font-weight: 500;
}

.modal-message {
    line-height: 1.7;
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

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

.modal.modal-large {
    max-width: 720px;
}

/* === 便管理・バス停割当（Issue #165 ⑤） === */
.assign-section {
    margin-bottom: 16px;
}

.assign-section-label,
.assign-section > label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-label);
    margin-bottom: 8px;
}

.assign-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.assign-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-surface-2);
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
}

.assign-item-order {
    font-size: 0.85rem;
    color: var(--text-secondary);
    min-width: 20px;
}

.assign-item-name {
    flex: 1;
}

.assign-item-time {
    width: 104px;
    padding: 6px 8px;
    font-size: 0.85rem;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 8px;
    color: var(--text-primary);
}

.assign-item-time:focus {
    outline: none;
    border-color: var(--ui-accent);
    box-shadow: var(--shadow-focus);
}

.assign-item-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-base);
    color: var(--text-primary);
    border-radius: 8px;
    min-width: 36px;
    min-height: 36px;
    cursor: pointer;
    transition: all 0.2s;
}

.assign-item-btn:hover {
    background: var(--bg-row-hover);
}

.assign-item-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.assign-item-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.assign-item-btn-remove {
    color: var(--color-error-dark);
}

.assign-empty {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 8px 0;
}

.assign-add-row {
    display: flex;
    gap: 8px;
}

.assign-select {
    flex: 1;
}

/* ========================================
 * トースト・メッセージ
 * ======================================== */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--toast-bg);
    color: var(--toast-text);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.85rem;
    box-shadow: var(--shadow-modal);
    /* モーダル（.overlay: 1000）・更新バナー（1100）より手前に出す */
    z-index: 1200;
}

.error-message {
    color: var(--sem-error-text);
    background: var(--sem-error-bg);
    border: 1px solid var(--sem-error-border);
    font-size: 0.85rem;
    padding: 10px 12px;
    margin: 8px 0;
    border-radius: 8px;
}

.loading {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    padding: 16px;
}

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

/* パネル直下の説明文（直後にボタン・フォームが続く） */
.big-tab-panel > .form-hint {
    margin-bottom: 12px;
}

/* パネル内のサブセクション見出し（§7.2 セクションタイトル） */
.panel-subheading {
    margin: 24px 0 4px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* バス停への路線コード複数タグ付け（Issue #38） */
.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

/* 一覧上部の「無効化済みも表示」トグル */
.inactive-toggle {
    margin: 10px 0;
}

.checkbox-group-scroll {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-base);
    border-radius: 8px;
    padding: 8px 12px;
}

.checkbox-group-scroll .checkbox-label {
    padding: 6px 0;
}

/* 全interactive要素にフォーカスリングを付ける。
   単体のstate切替チェックボックス（route-is-active等）にも一括適用する。 */
input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* ========================================
 * 運行履歴（Issue #166）— フィルタバー・KPIカード行
 * ======================================== */
.history-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 16px;
}

.history-filter-field {
    display: flex;
    flex-direction: column;
    min-width: 180px;
}

.history-filter-field label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-label);
    margin-bottom: 6px;
}

.history-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.history-detail-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.6;
}

/* 運行詳細の修正モード: 券種発行数の入力欄を1行に並べる */
.history-detail-meta label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 12px 6px 0;
}

.history-detail-meta .input {
    width: 80px;
    height: 34px;
    padding: 0 8px;
    font-size: 0.85rem;
}

.history-kpi-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.history-kpi-row .kpi {
    flex: 1;
}

/* ========================================
 * レポート（Issue #167）— 日次/月次/路線別の切替
 * §13.3 セグメント塗り反転（凹み地 + 選択 primary-600 塗り白文字。2-3択の排他切替向け）
 * ======================================== */
.report-type-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 16px;
    background: var(--bg-segment);
    border-radius: 8px;
}

.report-type-tab {
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
}

.report-type-tab:hover {
    color: var(--text-primary);
}

.report-type-tab.active,
.report-type-tab.active:hover {
    color: var(--color-on-primary);
    background: var(--color-primary);
    font-weight: 700;
}

.history-filter .history-filter-field[data-field] {
    display: none;
}

.history-filter.report-type-daily .history-filter-field[data-field="date"],
.history-filter.report-type-daily .history-filter-field[data-field="route"],
.history-filter.report-type-monthly .history-filter-field[data-field="month"],
.history-filter.report-type-monthly .history-filter-field[data-field="route"],
.history-filter.report-type-route-summary .history-filter-field[data-field="from"],
.history-filter.report-type-route-summary .history-filter-field[data-field="to"] {
    display: flex;
}

/* 確定状態バッジ（Issue #227）。非表示中に空の幅を取らないようmin-widthを外し、
   入力欄（高さ約48px）の中央に縦位置を揃える */
.history-filter-status {
    min-width: 0;
}

.history-filter-status .badge {
    margin-bottom: 13px;
}

/* ========================================
 * 更新履歴モーダル（Issue #238）
 * バージョンごとに §13.1 のカードで区切る。最新版は §13.2 の太い縦ライン（4px以上）で示す
 * ======================================== */
.changelog-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.changelog-entry {
    padding: 14px 16px;
}

.changelog-entry.is-latest {
    border-left: 5px solid var(--ui-accent);
}

.changelog-entry-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.changelog-version {
    font-size: 1.1rem;
    font-weight: 600;
}

.changelog-date {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.changelog-items {
    padding-left: 1.3em;
    font-size: 0.85rem;
    line-height: 1.7;
}

.changelog-items li + li {
    margin-top: 4px;
}

/* ========================================
 * 更新バナー（Issue #228。style.cssのapp.js側実装と同じ挙動を移植。
 * 事務側は運行中データ入力の懸念がないためスクロール確保の仕組みは設けない）
 * ======================================== */
.update-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    font-size: 0.85rem;
    background: var(--bg-surface);
    border-top: 1px solid var(--ui-accent);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}

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

/* ========================================
 * バージョン表示（Issue #228。クリックで更新履歴モーダルを開く）
 * ======================================== */
.app-version {
    position: fixed;
    bottom: 4px;
    right: 8px;
    z-index: 10;
    font-size: 11px;
    color: var(--text-secondary);
    text-decoration: none;
}

.app-version:hover {
    color: var(--link);
    text-decoration: underline;
}

/* ========================================
 * 印刷補助（最小限）
 * ======================================== */
@media print {
    body {
        background: #fff;
        color: #000;
    }
}