/* ============================================================
 *  dih-table.css
 *  防衛省情報本部 画像データ取得事業まとめ表 用スタイル
 *  render_dih_table() の出力に対応
 * ============================================================ */

/* ── ラッパー（レスポンシブ対応） ── */
.dih-wrap {
    max-width: var(--dih-max-width, 1100px);
    margin: 2em auto;               /* センタリング */
    overflow-x: auto;               /* 横スクロール対応 */
    -webkit-overflow-scrolling: touch;
    font-family: var(--dih-font, 'UD デジタル 教科書体 NK-B', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'メイリオ', sans-serif);
}

/* ── テーブル本体 ── */
.dih-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;            /* 列幅を colgroup で固定 */
    border: 0.74pt solid var(--dih-border-color, #434343);
}

/* ── キャプション ── */
.dih-caption {
    caption-side: top;
    text-align: center;
    font-weight: bold;
    font-size: calc(14px * var(--dih-font-scale, 1));
    padding: 0.5em 0;
    color: #333;
}

/* ============================================================
 *  ヘッダー
 * ============================================================ */
.dih-hdr {
    background: #8bc34a;            /* 元ファイルの緑 */
}
.dih-hdr-cell {
    color: #fff;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    border: 0.74pt solid var(--dih-border-color, #434343);
    padding: 14px 6px;
    line-height: 1.5;
    white-space: normal;            /* 狭い幅でも折り返す */
    overflow-wrap: break-word;
}
/* ヘッダー1列目（事業名）は少し小さいフォント */
.dih-hdr-cell:first-child {
    white-space: normal;
    line-height: 1.6;
}

/* ============================================================
 *  データ行 - ラベル列（事業名）
 * ============================================================ */
.dih-label {
    background: #fff;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    border: 0.74pt solid var(--dih-border-color, #434343);
    padding: 8px 6px;
    white-space: normal;            /* 折り返し許可 */
    overflow-wrap: break-word;
    line-height: 1.5;
}

/* ============================================================
 *  データ行 - 会社名
 * ============================================================ */
.dih-company {
    background: #fff;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    border: 0.74pt solid var(--dih-border-color, #434343);
    padding: 8px 6px;
    white-space: normal;            /* 折り返し許可 */
    overflow-wrap: break-word;      /* 長い単語も折り返す */
    word-break: break-all;          /* 英数字の途中でも折り返す */
    line-height: 1.4;
}

/* ============================================================
 *  データ行 - 金額
 * ============================================================ */
.dih-amount {
    background: #eef7e3;            /* 薄緑の背景 */
    font-weight: bold;
    text-align: right;
    vertical-align: bottom;
    border-left: 0.06pt solid var(--dih-border-color, #434343);
    border-right: 0.06pt solid var(--dih-border-color, #434343);
    border-top: 0.06pt solid var(--dih-border-color, #434343);
    border-bottom: none;
    padding: 4px 8px 0 6px;
    white-space: normal;            /* 狭い幅でも折り返す */
    overflow-wrap: break-word;
}

/* ============================================================
 *  データ行 - 契約日付
 * ============================================================ */
.dih-date {
    background: #eef7e3;
    font-weight: bold;
    text-align: right;
    vertical-align: top;
    border-left: 0.06pt solid var(--dih-border-color, #434343);
    border-right: 0.06pt solid var(--dih-border-color, #434343);
    border-top: none;
    border-bottom: 0.06pt solid var(--dih-border-color, #434343);
    padding: 0 8px 4px 6px;
    white-space: normal;
    overflow-wrap: break-word;
}

/* ============================================================
 *  合計行
 * ============================================================ */
.dih-total-label {
    background: #a4ccbd;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    border: 0.06pt solid #000;
    padding: 10px 6px;
}
.dih-total-val {
    background: #a4ccbd;
    font-weight: bold;
    text-align: right;              /* 右寄せ */
    vertical-align: middle;
    border: 0.06pt solid #000;
    padding: 10px 8px;
    white-space: normal;
    overflow-wrap: break-word;
}

/* ============================================================
 *  縞模様（stripe オプション有効時）
 * ============================================================ */
.dih-stripe .dih-label {
    background: #f5f5f5;
}
.dih-stripe .dih-company {
    background: #f5f5f5;
}
.dih-stripe .dih-amount,
.dih-stripe .dih-date {
    background: #e8f0dc;
}

/* ============================================================
 *  注記エリア
 * ============================================================ */
.dih-note {
    max-width: var(--dih-max-width, 1100px);
    margin: 1em auto 2em;
    padding: 12px 16px;
    border: 0.74pt solid #000;
    line-height: 1.8;
    font-family: var(--dih-font, 'UD デジタル 教科書体 NK-B', 'Noto Sans JP', sans-serif);
    color: #333;
    background: #fff;
}

/* ============================================================
 *  エラーメッセージ
 * ============================================================ */
.dih-error {
    text-align: center;
    color: #c00;
    padding: 2em;
    font-weight: bold;
}

/* ============================================================
 *  レスポンシブ対応
 *  min-width を使わず、テーブルを常にラッパー幅に収める。
 *  狭い画面ではフォント縮小・パディング圧縮で対応。
 * ============================================================ */

/* タブレット（〜900px） */
@media screen and (max-width: 900px) {
    .dih-wrap {
        margin: 1em 8px;
    }
    .dih-table {
        font-size: 90%;             /* 全体を少し縮小 */
    }
    .dih-hdr-cell,
    .dih-label,
    .dih-company {
        padding: 6px 4px;
    }
    .dih-amount,
    .dih-date {
        padding: 3px 6px;
    }
    .dih-total-label,
    .dih-total-val {
        padding: 6px 4px;
    }
}

/* スマートフォン横（〜600px） */
@media screen and (max-width: 600px) {
    .dih-wrap {
        margin: 0.5em 4px;
    }
    .dih-table {
        font-size: 75%;             /* さらに縮小 */
    }
    .dih-hdr-cell {
        padding: 6px 3px;
    }
    .dih-label,
    .dih-company {
        padding: 4px 3px;
    }
    .dih-amount,
    .dih-date {
        padding: 2px 4px;
    }
    .dih-total-label,
    .dih-total-val {
        padding: 4px 3px;
    }
    .dih-note {
        margin: 0.5em 4px 1em;
        padding: 8px 10px;
        font-size: 11px !important;
    }
}

/* スマートフォン縦（〜420px） */
@media screen and (max-width: 420px) {
    .dih-table {
        font-size: 62%;             /* 極小画面用 */
    }
    .dih-hdr-cell,
    .dih-label,
    .dih-company,
    .dih-amount,
    .dih-date,
    .dih-total-label,
    .dih-total-val {
        padding: 3px 2px;
    }
}