/**
 * 印刷専用スタイルシート
 * Toshin-SRO ルート検索結果印刷機能
 *
 * 作成日: 2025-10-09
 * バージョン: 2.0.0
 * 最終更新: 2025-10-13 (画面デザイン踏襲: カード風デザイン、ドットマーカー、強調表示)
 */

/* ========================================
   画面表示時の制御
   ======================================== */

/* 画面表示時: 印刷専用HTMLを非表示 */
.print-only {
    display: none;
}

/* ========================================
   ページ設定
   ======================================== */

@media print {
    @page {
        size: A4 portrait;
        margin: 15mm;
    }

    /* ========================================
       印刷時の表示制御
       ======================================== */

    /* 通常の検索結果表示を非表示 */
    #searchResults [x-show="isVisible"] {
        display: none !important;
    }

    /* 印刷専用HTMLのみ表示 */
    .print-only {
        display: block !important;
    }

    /* ========================================
       基本スタイル
       ======================================== */

    body {
        font-size: 10pt;
        line-height: 1.4;
        color: #000;
        background: #fff;
        font-family: 'Noto Sans CJK JP', 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 印刷時に背景色・ボーダーを保持（縦線表示に必須） */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* レスポンシブ対応で追加したpx-0クラスを印刷時にオーバーライド */
    main,
    #searchResults,
    .print-only {
        padding-left: 15mm !important;
        padding-right: 15mm !important;
    }

    /* ========================================
       フォントサイズ
       ======================================== */

    h1 {
        font-size: 14pt;
        font-weight: bold;
        margin-bottom: 4pt;
    }

    h2 {
        font-size: 12pt;
        font-weight: bold;
        margin-bottom: 4pt;
    }

    h3 {
        font-size: 11pt;
        font-weight: bold;
        margin-bottom: 3pt;
    }

    h4, h5 {
        font-size: 10pt;
        font-weight: bold;
        margin-bottom: 2pt;
    }

    /* ========================================
       非表示要素
       ======================================== */

    header,
    footer,
    nav,
    .print-hide,
    .print\:hidden,
    button:not(.keep-print),
    form button[type="submit"],      /* 検索ボタン */
    form button[type="button"] {     /* リセットボタン */
        display: none !important;
    }

    /* 印刷対象以外のルートカードを非表示 */
    .route-card:not(.print-target) {
        display: none !important;
    }

    /* 検索フォーム非表示 */
    form {
        display: none !important;
    }

    /* 検索セクション全体を非表示 */
    main > div[x-data="routeSearchForm"] {
        display: none !important;
    }

    /* ページナビゲーション非表示 */
    nav[aria-label="Pages"] {
        display: none !important;
    }

    /* 検索結果統計（4つのカード）非表示 */
    .grid.grid-cols-1.md\:grid-cols-4 {
        display: none !important;
    }

    /* タブナビゲーション非表示 */
    nav[aria-label="Tabs"] {
        display: none !important;
    }

    /* 閉じるボタン非表示（役割ベースのセレクタ） */
    button[aria-label="閉じる"],
    button[x-on\:click*="hideResults"] {
        display: none !important;
    }

    /* ========================================
       印刷専用要素の表示
       ======================================== */

    /* 印刷時: 印刷専用HTMLを表示 */
    .print-only {
        display: block !important;
    }

    .print\:block {
        display: block !important;
    }

    .hidden.print\:block {
        display: block !important;
    }

    /* ========================================
       改ページ制御
       ======================================== */

    h1, h2, h3, h4, h5 {
        page-break-after: avoid;
    }

    .route-detail-section {
        page-break-inside: avoid;
    }

    /* 便詳細情報は改ページして表示 */
    .page-break-before {
        page-break-before: always;
        margin-top: 20pt; /* 便詳細情報セクションの上部マージン */
    }

    /* ========================================
       ボーダー・背景色
       ======================================== */

    .border-gray-200,
    .border-gray-300 {
        border-color: #333 !important;
    }

    .border-green-400,
    .border-purple-400 {
        border-color: #666 !important;
    }

    .bg-gray-50,
    .bg-green-50,
    .bg-purple-50,
    .bg-blue-50,
    .bg-orange-50,
    .bg-primary-50 {
        background-color: #f9f9f9 !important;
    }

    /* ========================================
       テキスト色
       ======================================== */

    .text-green-600,
    .text-purple-600,
    .text-blue-600,
    .text-primary-600 {
        color: #000 !important;
    }

    .text-gray-500,
    .text-gray-600,
    .text-gray-700 {
        color: #333 !important;
    }

    /* ========================================
       リンク・ボタン
       ======================================== */

    a {
        text-decoration: none;
        color: #000;
    }

    /* ========================================
       印刷用タイトル・ヘッダー
       ======================================== */

    .print-header {
        border-bottom: 1.5pt solid #000;
        padding-bottom: 4pt;
        margin-bottom: 8pt;
    }

    /* 手書き日付欄 */
    .print-handwritten-date {
        margin-bottom: 8pt;
        padding: 4pt 6pt;
        text-align: right;
        font-size: 11pt;
    }

    .print-handwritten-date .date-field {
        display: inline-block;
        min-width: 120pt;
        padding-bottom: 2pt;
        padding-left: 3em;
        color: #666;
        font-size: 10pt;
        letter-spacing: 3em;
    }

    /* ========================================
       便詳細情報セクション
       ======================================== */

    .route-detail-item {
        border: 1pt solid #333;
        padding: 6pt;
        margin-bottom: 6pt;
        border-radius: 3pt;
    }

    /* ========================================
       印刷専用レイアウト（画面デザイン踏襲）
       ======================================== */

    /* 検索条件セクション: カード風デザイン */
    .print-search-conditions {
        border: 1pt solid #ccc;
        padding: 6pt;
        margin-bottom: 8pt;
        background: #f5f5f5;
        border-radius: 3pt;
    }

    .print-search-conditions h2 {
        color: #333;
        border-bottom: 1pt solid #999;
        padding-bottom: 2pt;
        margin-bottom: 4pt;
    }

    .print-search-conditions dl {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 2pt 6pt;
        margin: 0;
    }

    .print-search-conditions dt {
        font-weight: bold;
        color: #444;
    }

    .print-search-conditions dd {
        margin: 0;
        color: #000;
    }

    /* ルート概要セクション: 強調デザイン */
    .print-route-summary {
        border: 1.5pt solid #444;
        padding: 6pt;
        margin-bottom: 8pt;
        background: #fff;
        border-radius: 3pt;
    }

    .print-route-summary h2 {
        color: #000;
        border-bottom: 1pt solid #666;
        padding-bottom: 2pt;
        margin-bottom: 4pt;
    }

    .print-route-summary dl {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 2pt 6pt;
        margin: 0;
    }

    .print-route-summary dt {
        font-weight: bold;
        color: #333;
    }

    .print-route-summary dd {
        margin: 0;
        color: #000;
        font-weight: 600;
    }

    /* ルート詳細テーブル: ドットマーカー追加 */
    .print-route-detail {
        margin-bottom: 8pt;
    }

    .print-route-detail h2 {
        color: #000;
        border-bottom: 1pt solid #999;
        padding-bottom: 2pt;
        margin-bottom: 4pt;
    }

    .print-route-detail table {
        width: 100%;
        border-collapse: collapse;
        border: 1pt solid #666;
    }

    .print-route-detail table th {
        background: #e0e0e0;
        padding: 3pt 6pt;
        text-align: left;
        border: 1pt solid #666;
        font-weight: bold;
        color: #000;
    }

    .print-route-detail table td {
        padding: 3pt 6pt;
        border: 1pt solid #999;
        color: #000;
    }

    /* 出発地行: 緑ドットマーカー（中継地と同サイズ） */
    .print-route-detail table tbody tr.print-route-start {
        background: #f0fdf4; /* green-50相当 */
    }

    .print-route-detail table tbody tr.print-route-start td {
        padding-top: 8pt; /* 出発地を少し下げる */
    }

    .print-route-detail table tbody tr.print-route-start td:first-child::before {
        content: '\25CF\0020'; /* ● (Black Circle) + space */
        color: #22c55e; /* green-500 */
        font-size: 10pt;
        margin-right: 4pt;
    }

    /* 中継地行: 青ドットマーカー */
    .print-route-detail table tbody tr.print-route-transit {
        background: #eff6ff; /* blue-50相当 */
    }

    .print-route-detail table tbody tr.print-route-transit td:first-child::before {
        content: '\25CF\0020'; /* ● (Black Circle) + space */
        color: #3b82f6; /* blue-500 */
        font-size: 10pt;
        margin-right: 4pt;
    }

    /* 目的地行: 赤ドットマーカー（大きく強調） */
    .print-route-detail table tbody tr.print-route-end {
        background: #fef2f2; /* red-50相当 */
    }

    .print-route-detail table tbody tr.print-route-end td {
        font-size: 12pt;
        font-weight: bold;
    }

    .print-route-detail table tbody tr.print-route-end td:first-child::before {
        content: '\25CF\0020'; /* ● (Black Circle) + space */
        color: #ef4444; /* red-500 */
        font-size: 14pt;
        margin-right: 4pt;
        font-weight: bold;
    }

    /* 便名セル: 強調表示 */
    .print-route-detail table tbody td:nth-child(3) {
        font-weight: 600;
        background: #fafafa;
    }

    /* 便詳細情報セクション */
    .print-segment-details {
        margin-top: 8pt;
        padding-top: 6pt;
        border-top: 1.5pt solid #999;
    }

    .print-segment-details h2 {
        color: #000;
        border-bottom: 1pt solid #999;
        padding-bottom: 2pt;
        margin-bottom: 4pt;
    }

    .print-segment-item {
        border: 1pt solid #666;
        padding: 4pt;
        margin-bottom: 4pt;
        background: #fafafa;
        border-radius: 2pt;
    }

    .print-segment-item h3 {
        color: #000;
        background: #e5e5e5;
        padding: 2pt 4pt;
        margin: -4pt -4pt 3pt -4pt;
        border-bottom: 1pt solid #999;
        border-radius: 2pt 2pt 0 0;
    }

    .print-segment-item dl {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 2pt 4pt;
        margin: 0;
    }

    .print-segment-item dt {
        font-weight: bold;
        color: #444;
        font-size: 9pt;
    }

    .print-segment-item dd {
        margin: 0;
        color: #000;
        font-size: 9pt;
    }
}