﻿.print-area {
    /* ページ区切り */
    break-after: page;
    /* 罫線や文字を印刷で確実に出す */
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    /* 用紙 */
    .sheet {
        display: flex;
        flex-direction: column;
        margin: 16px auto;
        padding: 12mm;
        box-sizing: border-box;
        border: 1px solid #000;
        background: #fff;
        color: #000;
        font-family: "MS Gothic",monospace;
        box-shadow: 0 0 10px rgba(0,0,0,.18);
    }

    .report-title {
        align-self: center;
        margin-top: 2mm;
        overflow: hidden;
        font-size: 25px;
        font-weight: 700;

        .title-wrapper {
            display: inline-block;
            /* letter-spacingにより右端に余白ができるのでネガティブマージンで打ち消す */
            margin-right: -10px;
            text-decoration: underline;
            letter-spacing: 10px;
        }

        &:has(+ :not(.report-subtitle)) {
            margin-bottom: 6mm;
        }
    }

    .report-address {
        font-size: 18px;
        font-weight: 700;
    }

    .report-subtitle {
        margin-bottom: 6mm;
        font-size: 14px;
        text-align: center;
    }

    .report-meta {
        display: grid;
        align-items: end;
        grid-template-columns: 1fr 1fr 1fr;
        margin-bottom: 2mm;
        font-size: 14px;

        > .left {
            grid-column: 1;
            justify-self: start;
            white-space: nowrap;
        }

        > .center {
            grid-column: 2;
            justify-self: center;
            white-space: nowrap;
        }

        > .right {
            grid-column: 3;
            justify-self: end;
            text-align: right;
            white-space: nowrap;
        }
    }

    table.report {
        width: 100%;
        table-layout: fixed;
        border: 1px solid #000;
        border-collapse: collapse;
        box-sizing: border-box;
        font-size: 10px;

        * {
            box-sizing: border-box;
        }

        thead {
            border-bottom: 3px double #000;
        }

        tr.no-border-top {
            .cell {
                border-top: none !important;
                padding-top: 0;
            }
        }

        tr.no-border-bottom {
            .cell {
                border-bottom: none;
                padding-bottom: 0;
            }
        }

        tr.no-border-top-bottom {
            .cell {
                border-top: none;
                border-bottom: none;
                padding-top: 0;
                padding-bottom: 0;
            }
        }

        .cell {
            padding: 1px 2px;
            border: 1px solid #000;
            white-space: nowrap;
            overflow: hidden;
            padding-top: 0px;
            padding-bottom: 0px;
        }

        .header-cell {
            text-align: center;
        }

        .data-cell {
            &.number {
                text-align: right;
            }

            &.quantity {
                &.quantity-measure-unit {
                    text-align: right;
                }

                &.quantity-trade-unit {
                    .value-wrapper {
                        display: grid;
                        grid-template-columns: auto 1fr auto;
                        width: 100%;

                        .value {
                            text-align: right;
                        }
                    }
                }
            }

            &.currency {
                .value-wrapper {
                    display: grid;
                    grid-template-columns: auto 1fr auto;
                    width: 100%;

                    .value {
                        text-align: right;
                    }
                }
            }

            &.text-left {
                text-align: left;
            }

            &.text-right {
                text-align: right;
            }

            &.text-center {
                text-align: center;
            }

            &.text-justify {
                text-align-last: justify;
            }
        }
    }
}

/* 用紙: A4横 */
html.report-layout-a4-landscape .print-area .sheet {
    width: 297mm;
    min-height: 210mm;
}

/* 用紙: A4縦 */
html.report-layout-a4-portrait .print-area .sheet {
    width: 210mm;
    min-height: 297mm;
}

.no-screen {
    display: none;
}

@media print {
    body {
        background: #fff;
    }

    /* 画面用UIは印刷しない */
    .no-print {
        display: none !important;
    }

    /* 印刷時はトンボを表示 */
    .no-screen {
        display: block;
    }

    /* 印刷時は画面の余白を消す */ 
    .v-main,
    .v-main > .v-container,
    .v-main > .v-container > .v-card {
        padding: 0 !important;
    }

    .print-area {
        /* 印刷時は用紙ぴったり */
        .sheet {
            width: auto !important;
            min-height: auto !important;
            margin: 0;
            padding: 0;
            border: none;
            box-shadow: none;
        }

        table.report {
            /* 印刷時に右端の罫線が細くなるのを回避 */
            width: calc(100% - 1px);
        }
    }
    .billing .print-area .sheet {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative; /* 子要素の fixed 位置の基準をブラウザにするため */
    }

    .billing .print-marks .mark {
        position: fixed;
        font-size: 9pt; /* マークの大きさ */
        color: #000;
        z-index: 9999;
    }

    /* A4横の上辺・下辺に配置する例 */
    .billing .print-marks .mark-top
    {
        top: 0mm;
        right: 68mm;
    }
    .billing .print-marks .mark-bottom {
        bottom: 0mm;
        right: 68mm;
    }

    /* 用紙: A4横 */
    html.report-layout-a4-landscape .print-area .sheet {
        height: 186mm;
    }

    /* 用紙: A4縦 */
    html.report-layout-a4-portrait .print-area .sheet {
        height: 273mm;
    }
}

@page {
    size: A4 landscape; /* or portrait */
    margin: 0;
}

/* 請求一覧表 */
.billing-list-output-count {
    width: 297mm;
    max-width: calc(100% - 32px);
    margin: 16px auto 0;
    font-size: 18px;
}

/* 精算書 */
.settlement {
    .print-area {
        .sheet {
            font-size: 12px;

            .report-title {
                font-size: 26px;

                .title-wrapper {
                    margin-right: -20px;
                    letter-spacing: 20px;
                }
            }

            .report-subtitle {
                font-size: 16px;
            }

            table.report {
                font-size: 15px;

                .cell {
                    padding: 4px 2px;
                }

                .item-name-cell {
                    padding-left: 4%;
                    padding-right: 4%;
                }

                .item-total-name-cell {
                    padding-left: 4%;
                    padding-right: 4%;
                    font-size: 15.5px;
                    font-weight: 600;
                }

                .item-total-amount-cell {
                    font-size: 15.5px;
                    font-weight: 600;
                }

                &.cost {
                    margin-top: 16px;
                }

                &.total {
                    margin-top: 20px;
                    border: 2px solid #000;
                    border-collapse: collapse;

                    .item-name-cell {
                        padding-left: 8%;
                        padding-right: 8%;
                    }

                    .settlement-amount-cell {
                        border-right: none;

                        & ~ td {
                            border-left: none;
                        }
                    }

                    tr.double-row {
                        td {
                            height: 3em;
                            line-height: 3em;
                            padding-top: 0;
                            padding-bottom: 0;
                            font-size: 16px;
                            font-weight: 700;
                            border: none;
                        }
                    }
                }

                & + .note {
                    margin-top: 16px;
                    text-decoration: underline;
                    line-height: 3;
                }
            }
        }
    }
}

/* 商社数量 */
.shosha-quantity {
    .print-area {
        table.report {
            font-size: 8px;
            border: none;

            thead {
                border-bottom: none;

                > tr:last-child :is(td, th) {
                    border-bottom: 3px double #000;
                }
            }

            .cell {
                &.dummy-cell {
                    border: none !important;
                }
            }

            th {
                font-weight: normal;

                .price-label {
                    font-size: 6px;
                }
            }

            tr.subtotal-row, tr.total-row {
                .cell {
                    border-top: 3px double #000;
                }
            }
        }
    }
}

/* 工場別出荷数量 */
.plant-syukka-quantity {
    .print-area {
        .report-title {
            font-size: 21px;
        }

        .report-meta {
            margin-bottom: 1.8mm;
        }

        table.report {
            font-size: 6px;
            border: none;

            thead {
                border-bottom: none;

                > tr:last-child :is(td, th) {
                    border-bottom: 3px double #000;
                }
            }

            .cell {
                &.dummy-cell {
                    border: none !important;
                }

                &.levy-header {
                    padding: 0;
                    border-top: none;
                    border-left: none;
                    text-align: right;

                     > div {
                         display: inline-block;
                         width: 80%;
                         border-top: 1px solid #000;
                         border-left: 1px solid #000;
                         padding: 1px 2px;
                         text-align: center;
                     }
                }
            }

            tr.weekend {
                .cell:not(.dummy-cell) {
                    background-color: #f0f0f0;
                }
            }

            &:not(:last-child) {
                margin-bottom: 10px;
            }
        }
    }
}

/* 請求書 */
.billing {
    .billing-output-count {
        width: 297mm;
        max-width: calc(100% - 32px);
        margin: 16px auto 0;
        font-size: 18px;
    }

    .print-area {
        .sheet {
            /* 請求書だけ明朝体にする */
            font-family: "MS Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
            /* ★ 文字を濃くする */
            font-weight: 550; /* 500〜700 あたりで好みを調整 */
            /* ★ 横幅を少しだけ縮める */
            width: 95%;
            margin-left: auto;
            margin-right: auto; /* 中央寄せ */
        }
        /* ヘッダーを上側 80mm に収める */
        .billing-report-header {
            /* ヘッダー本体を 70mm に固定 */
            height: 65mm;
            /* 内容が溢れた場合は中で折り返す（はみ出さないように） */
            overflow: hidden;
            /* ★ ヘッダーの上の余白を広げる */
            margin-top: 5mm; /* 好きな値に調整（例: 3〜10mm） */
        }

        table.billing-report {
            font-size: 10.5px;
            width: 100%;
            /* ヘッダー行を少し灰色に */
            thead .header-cell {
                background-color: #f5f5f5;
            }
            /* tbody の奇数行: 白 */
            tbody tr:nth-child(odd) .data-cell {
                background-color: #ffffff;
            }
            /* tbody の偶数行: 少し灰色 */
            tbody tr:nth-child(even) .data-cell {
                background-color: #f5f5f5;
            }

            .cell {
                /* 左右の線はそのまま */
                border-left: 1px solid #000;
                border-right: 1px solid #000;
                /* 上下の線をほぼ見えないレベルにする */
                border-top: 0.1px solid rgba(0, 0, 0, 0.1);
                border-bottom: 0.1px solid rgba(0, 0, 0, 0.1);
                /* ★ 余白を減らす（上下左右ほぼゼロ） */
                padding-top: 0;
                padding-bottom: 0;
                padding-left: 1px;
                padding-right: 1px;
                font-size: 12px; /* 元が 10.5px なら +0.5 くらい */
                line-height: 1.26; /* 行間を詰めて高さの増加を抑える */
            }
            /* ヘッダー行はしっかり線を付ける */
            thead .cell {
                border-top: 1px solid #000;
                border-bottom: 1px solid #000;
            }
            /* tbody の一番下の行だけ、下側に線を付ける */
            tbody tr:last-child .cell {
                border-bottom: 1px solid #000;
            }
        }

        .billing-report-header {
            width: 100%; /* これで sheet(95%) に対して横方向いっぱいになる */
            display: grid;
            grid-template-areas:
                "bill-to billing-title bill-from"
                "bill-to billing-meta bill-from"
                "summary summary bill-from";
            grid-template-columns: repeat(3, 1fr);
            margin-bottom: 3px;

            .bill-to {
                grid-area: bill-to;
                display: flex;
                flex-direction: column;
                /* ★ 中身を左寄せにする */
                align-items: flex-start;
                font-size: 10px;
                margin-left: 22.5mm;
                /* これくらいの幅・高さは確保する */
                min-width: 6.5cm;
                min-height: 3cm;

                .information {
                    display: flex;
                    flex-direction: column;
                    padding: 4px 6px;
                    border: 1px solid #000;
                    width: 6.5cm;
                    min-height: 3cm; /* 高さの最低値だけ決める */
                    height: auto; /* 内容に応じて伸びるようにする */
                    font-size: 14px;
                    line-height: 1.5;
                }

                .client-postal-code {
                    align-self: flex-start;
                    margin-bottom: 2px; /* 住所との間に少し余白 */
                    font-size: 11px; /* 郵便番号の文字サイズを少し小さく */
                }

                .client-address {
                    align-self: flex-start;
                    margin-bottom: 5px; /* 得意先名との間に少し余白 */
                    font-size: 12.5px; /* 住所の文字サイズを少し小さく */
                    white-space: pre-wrap; /* 改行(\n)を反映しつつ、長い行は折り返す */
                    line-height: 1.5; /* 行間 */
                    min-height: calc(1em * 1.5 * 2); /* 最低2行分の高さを確保 */
                }

                .client-name {
                    font-size: 14px;
                }

                .honorific {
                    margin-top: auto; /* これで縦方向の一番下に移動 */
                    text-align: right; /* 行内で右寄せ */
                    padding-right: 1mm; /* 右端から少し内側に */
                    padding-bottom: 0.5mm; /* 下端から少し内側に */
                }

                .page-code {
                    margin-right: 30px;
                    margin-top: 3px;
                    text-align: right;
                    font-size: 10px;
                }
            }

            .billing-title {
                grid-area: billing-title;
                margin-bottom: 6mm;
                display: flex;
                justify-content: center;
                align-items: baseline;

                .report-title-wrapper {
                    display: flex;
                    flex-direction: column;

                    .report-title {
                        margin: 0;
                    }
                }

                .plant-copy {
                    width: 0;
                    overflow: visible;
                    font-size: 16px;
                    white-space: nowrap;
                }
            }

            .billing-meta {
                grid-area: billing-meta;
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 12px;

                .billing-code {
                    margin-top: 1em;
                }
            }

            .bill-from {
                grid-area: bill-from;
                display: flex;
                flex-direction: column;
                align-items: end;
                height: 100%; /* ヘッダー右側の高さいっぱいを使う */

                .information {
                    margin-bottom: auto; /* 下方向に空きを押し出す */

                    .union-name {
                        font-size: 17px;
                    }

                    .details {
                        display: flex;
                        gap: 17px;

                        .postal-code {
                            flex-basis: 0;
                            white-space: nowrap;
                            font-size: 12px;
                        }

                        .address {
                            font-size: 12px;
                        }

                        .phone-number {
                            font-size: 11px;
                        }

                        .plant-name {
                            font-size: 12px;
                        }

                        .plant-address, .plant-phone-number {
                            margin-left: 20px;
                            font-size: 10px;
                        }
                    }

                    .union-code {
                        font-size: 12px;
                    }

                    .transfer-fee-note {
                        font-size: 12px;
                        text-decoration: underline;
                        margin-top: 5px;
                    }

                    .transfer-destination {
                        display: grid;
                        grid-template-columns: minmax(0, max-content) 1fr;
                        gap: 0 16px;
                        margin-top: 10px;
                        font-size: 10px;

                        .bank-table {
                            border-collapse: collapse;
                            border-spacing: 0;
                            border: none;
                        }
                    }
                }
                /* signature はその空きの一番下に来る */
                .signature {
                    margin-top: 0; /* 任意の余白があれば 0 に */
                }

                .signature-table {
                    table-layout: fixed;
                    border-collapse: collapse;
                    border-spacing: 0;
                    border: 1px solid #000;
                    font-size: 13px;

                    th, td {
                        width: 50px;
                        border: 1px solid #000;
                    }

                    th {
                        height: 15px;
                    }

                    td {
                        height: 45px;
                    }
                }
            }

            .summary {
                grid-area: summary;
                align-self: start; /* 3行目の上端に揃える */
                margin-top: 15px;
                font-size: 12px;

                .summary-table {
                    width: auto;
                    margin-top: 0px;

                    &.report {
                        font-size: 12px;
                    }

                    th, td {
                        width: 90px;
                        border: 1px solid #000;
                    }
                    /* 消費税率列だけ幅を狭くする（5列目） */
                    thead tr th:nth-child(5),
                    tbody tr td:nth-child(5) {
                        width: 60px; /* 好きな値に調整 */
                    }
                    /* ヘッダー行を少し灰色に */
                    thead .header-cell {
                        background-color: #f5f5f5;
                    }
                }
            }
        }
    }
}

/* 入金日計表 */
.deposit-daily {
    .print-area {
        table.report {
            /* 入金日計表専用の文字サイズ */
            font-size: 12px; /* 元は 10px。好みに応じて 11〜12px くらいに */

            .cell {
                /* 入金日計表専用の行の縦幅（余白） */
                padding-top: 4px; /* 元は 1px なので +3px */
                padding-bottom: 4px;
            }
        }
    }
}