@charset "UTF-8";

/* =========================================
   画面表示用スタイル (通常時)
   ========================================= */
body { font-family: "Helvetica Neue", Arial, sans-serif; background-color: #f4f7f6; color: #333; }

.main-container {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

h1 { color: #2c3e50; }
.upload-area { border: 2px dashed #dee2e6; background-color: #f8f9fa; }
.btn { font-weight: bold; }

/* リンク */
.ch-name a, a.link-text { color: #0d6efd; text-decoration: none; border-bottom: 1px dashed #0d6efd; transition: all 0.2s ease; }
.ch-name a:hover, a.link-text:hover { color: #0a58ca; border-bottom: 1px solid #0a58ca; }

/* テーブル設定 */
table { font-size: 14px; }
th { cursor: pointer; user-select: none; position: relative; }
th:hover { background-color: #e9ecef; }
th::after { content: '\25BC'; font-size: 0.7em; color: #ccc; margin-left: 5px; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }
th.sorted-asc::after { content: '\25B2'; color: #333; }
th.sorted-desc::after { content: '\25BC'; color: #333; }

.num { text-align: right; font-family: Consolas, monospace; font-weight: bold; }
.ch-name { font-weight: bold; font-size: 1.05em; }
.ch-id { font-size: 0.85em; color: #6c757d; }

/* 画面用グラフサイズ */
.chart-container-pie { position: relative; height: 400px; width: 100%; }
.chart-container-bar { position: relative; height: 500px; width: 100%; }

/* フッター */
footer { margin-top: auto; }
.footer-links a { color: #bdc3c7; text-decoration: none; margin: 0 5px; }
.print-header { display: none; }


/* =========================================
   印刷用スタイル (PDF保存・印刷時)
   ========================================= */
@media print {
    @page { 
        size: A4; 
        margin: 15mm; /* 余白を少し広めに確保 */
    }

    body { 
        background-color: #fff !important; 
        color: #000 !important; 
        font-size: 9pt;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Bootstrapのコンテナ・行の余白を強制リセット（左切れ防止） */
    .container, .main-container { 
        width: 100% !important; 
        max-width: 100% !important; 
        padding: 0 !important; 
        margin: 0 !important; 
        box-shadow: none !important;
    }
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 不要パーツ非表示 */
    .navbar, .upload-area, .btn, .action-bar, .api-alert, hr, footer { 
        display: none !important; 
    }
    
    /* 印刷用ヘッダー */
    .print-header { 
        display: block !important; 
        text-align: center; 
        margin-bottom: 20px; 
        border-bottom: 2px solid #333; 
        padding-bottom: 10px;
    }

    h3 { 
        font-size: 14pt; 
        margin-bottom: 15px; 
        border-left: 5px solid #333 !important; 
        padding-left: 10px; 
        color: #000 !important;
    }

    /* ---【重要】グラフのレイアウト修正 (テーブルレイアウト法) --- */
    /* これにより、Bootstrapのグリッドシステムを無視して強制的に横並びにします */
    
    .charts-row {
        display: table !important;
        width: 100% !important;
        table-layout: fixed; /* 均等幅にする */
        margin-bottom: 20px !important;
        border-spacing: 10px 0; /* カラム間の隙間 */
    }

    .chart-col {
        display: table-cell !important;
        width: 50% !important;
        vertical-align: top;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important; /* フロート解除 */
    }

    .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    /* グラフの高さを固定し、はみ出しを防ぐ */
    .chart-container-pie, .chart-container-bar { 
        height: 300px !important; 
        width: 100% !important;
        overflow: hidden;
    }
    canvas {
        max-height: 300px !important;
        width: 100% !important;
    }

    /* --- テーブル設定 --- */
    .table-section { 
        width: 100% !important;
        page-break-before: always; 
        margin-top: 20px !important;
    }
    .table-responsive {
        overflow: visible !important; 
        display: block !important;
        width: 100% !important;
    }
    table { 
        width: 100% !important; 
        table-layout: fixed; 
        font-size: 8pt; 
        border-collapse: collapse !important;
    }
    th, td { 
        padding: 4px !important; 
        border: 1px solid #666 !important; 
        word-wrap: break-word;
    }
    
    /* 列幅 */
    th:nth-child(1) { width: 6%; }  
    th:nth-child(2) { width: 35%; } 
    
    a { text-decoration: none !important; color: #000 !important; pointer-events: none; }
    a[href]:after { content: none !important; }
}