/* 全体のスタイル */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    font-size: 12px; /* 文字を全体的に小さくする */
}

body {
    background-color: #f5f5f5;
    padding: 20px;
    min-width: 640px; /* ページの最小幅を640pxに設定 */
}

.container {
    max-width: 1000px;
    margin: 0 auto;
}

/* 請求書のスタイル */
.invoice-container {
    background-color: white;
    padding: 40px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    /* A4サイズのアスペクト比（1:1.414）を設定 */
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    min-height: 1130px; /* 800px * 1.414 = 約1130px */
    box-sizing: border-box;
}

.invoice-title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 30px;
}

/* ヘッダー部分 */
.invoice-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px; /* 20pxから10pxに変更してさらに余白を小さく */
}

.client-info {
    width: 60%;
    line-height: 1.6;
}

.invoice-info {
    width: 35%;
    text-align: right;
}

/* 請求日・請求書番号のテーブル */
.info-table {
    width: 100%;
    border-collapse: collapse;
    margin-left: auto; /* 右寄せ */
}

.info-table td {
    padding: 5px;
    vertical-align: middle;
    height: 24px; /* セルの高さを文字サイズの2倍程度に調整 */
}

.info-label {
    text-align: right;
    padding-right: 10px;
    white-space: nowrap;
}

.info-value {
    text-align: left;
}

.info-value .editable {
    min-width: 150px;
    width: 150px; /* 固定幅を設定 */
    height: 24px; /* 固定高さを設定 */
    text-align: left;
}

/* 3行目のレイアウト */
.invoice-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.invoice-left {
    width: 60%;
}

/* 送信者情報 */
.sender-info {
    width: 35%;
    text-align: right;
    line-height: 1.6;
}

/* 請求書説明 */
.invoice-description {
    margin-bottom: 15px;
}

/* 件名テーブルのスタイル */
.project-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    margin-bottom: 15px;
}

.project-label {
    width: 80px;
    padding: 5px 10px 5px 0;
    font-weight: bold;
    vertical-align: middle;
}

.project-value {
    padding: 5px 0;
    vertical-align: middle;
}

.project-value .editable {
    min-width: 150px;
    width: 300px; /* 固定幅を設定 */
    height: 24px; /* 固定高さを設定 */
}

/* 請求書サマリー */
.invoice-summary {
    margin-bottom: 5px;
    border-collapse: collapse;
    width: 100%;
}

.invoice-summary td {
    border: 1px solid #000;
    padding: 0;
    text-align: center;
    height: 24px; /* 行の高さを文字サイズの2倍程度に調整 */
    vertical-align: middle;
}

/* ヘッダー行のスタイル */
.summary-header {
    background-color: #f9f9f9;
    font-weight: normal;
    height: 24px;
}

/* 値の行の高さを大きくする */
.invoice-summary tr:nth-child(2) td {
    height: 36px; /* 通常の1.5倍の高さに */
}

/* 請求金額のセルを強調 */
.total {
    font-weight: bold;
}

/* 請求金額の値を目立たせる */
.invoice-summary tr:nth-child(2) .total .editable {
    font-size: 18px; /* 値の部分だけ大きく */
}

/* 請求金額のセルを左右に大きくする */
.invoice-summary td:nth-child(3) {
    width: 40%; /* 他のセルより広く */
}

/* 小計と消費税のセルの幅を調整 */
.invoice-summary td:nth-child(1),
.invoice-summary td:nth-child(2) {
    width: 30%;
}

/* 編集可能要素のスタイル調整 */
.invoice-summary .editable {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 !important;
    border: 1px dashed #1E90FF;
}

/* 自動計算される項目の境界線を削除 */
.invoice-summary .editable.readonly {
    border: none;
}

/* 支払い情報 */
.payment-info {
    margin-bottom: 20px;
}

.payment-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #000;
    table-layout: fixed; /* 固定レイアウトを設定 */
}

.payment-header {
    padding: 5px;
    border: 1px solid #000;
    background-color: #f9f9f9;
    text-align: center;
    height: 24px; /* 行の高さを文字サイズの2倍程度に調整 */
}

/* 入金期日と振込先の幅を調整 */
.payment-table td:first-child {
    width: 30%; /* 入金期日のセルを30%に */
}

.payment-table td:last-child {
    width: 70%; /* 振込先のセルを70%に */
}

.payment-cell {
    padding: 0;
    border: 1px solid #000;
    height: 24px; /* 行の高さを文字サイズの2倍程度に調整 */
    vertical-align: middle; /* 縦方向に中央寄せ */
}

.payment-bank-cell {
    height: 70px; /* 2行分の高さを確保 */
}

.payment-cell .editable {
    display: flex;
    align-items: center; /* 縦方向に中央寄せ */
    height: 100%;
    margin: 0;
    width: 100%; /* 幅を100%に */
    padding: 5px;
}

.payment-bank-info {
    min-height: 48px; /* 2行分の高さを確保 */
    height: 48px; /* 固定高さを設定 */
    white-space: pre-wrap; /* 改行を保持 */
    word-wrap: break-word; /* 長い単語を折り返す */
    line-height: 1.6; /* 請求先フォームと同じ行間 */
    padding: 5px;
    margin: 0;
    width: 100%; /* 幅を100%に */
    font-size: 12px; /* プレースホルダーと同じ文字サイズを明示的に設定 */
}

/* 振込先に入力したテキストのスタイルを維持 */
.payment-bank-info:not(:empty) {
    line-height: 1.6; /* プレースホルダーと同じ行間を維持 */
    font-size: 12px; /* プレースホルダーと同じ文字サイズを維持 */
}

/* 請求書詳細 */
.invoice-details {
    margin-bottom: 20px;
    /* 請求内容詳細テーブルのための余白を確保 */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.details-table {
    width: 100%;
    border-collapse: collapse;
    /* テーブルのレイアウトを固定 */
    table-layout: fixed;
}

/* 摘要の列の横幅を大きくする */
.details-table th:first-child,
.details-table td:first-child {
    width: 50%; /* 摘要の列を50%の幅に設定 */
}

/* 数量、単価、明細金額の列の横幅を調整 */
.details-table th:not(:first-child),
.details-table td:not(:first-child) {
    width: 16.67%; /* 残りの50%を3列で均等に分ける */
}

.details-table th, .details-table td {
    border: 1px solid #000;
    padding: 0;
    text-align: center;
    height: 30px; /* セルの高さを固定 */
    min-height: 30px; /* 最小の高さも固定 */
    max-height: 30px; /* 最大の高さも固定 */
    box-sizing: border-box;
    overflow: hidden; /* はみ出した内容を隠す */
}

.details-table th {
    background-color: #f9f9f9;
}

.details-table td:first-child {
    text-align: left;
}

/* 空の行のスタイル */
.empty-row td {
    height: 30px; /* 空の行の高さを文字サイズの2倍程度に調整 */
}

/* 税金計算 */
.tax-calculation {
    margin-bottom: 20px;
    text-align: right;
}

.tax-table {
    width: auto;
    border-collapse: collapse;
    border: 1px solid #000;
    margin-left: auto; /* 右寄せ */
}

.tax-table td {
    padding: 0;
    border: none; /* 内部のセル境界線を削除 */
    height: 24px; /* 行の高さを文字サイズの2倍程度に調整 */
}

.tax-label-left {
    width: 60px;
    text-align: center;
    vertical-align: middle;
}

.tax-label-right {
    width: 120px;
    text-align: left;
    vertical-align: middle;
}

.tax-value {
    width: 120px;
    text-align: right;
    vertical-align: middle;
}

.tax-value .editable {
    text-align: right;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    min-width: 100px;
    margin: 0;
    width: 100%; /* 幅を100%に */
    padding: 5px;
}

/* 内訳の10%対象(税抜)と10%消費税の編集不可要素の境界線を削除 */
.tax-value .editable.readonly {
    border: none;
}

/* 備考欄 */
.notes-section {
    margin-bottom: 20px;
    border: 1px solid #000;
}

.notes-title {
    padding: 0 5px;
    border-bottom: 1px solid #000;
    background-color: #f9f9f9;
    height: 24px; /* 文字サイズの2倍程度に調整 */
    display: flex;
    align-items: center; /* 縦方向の中央揃え */
}

.notes-content {
    padding: 10px;
    min-height: 36px;
    /* 複数行入力のための設定 */
    white-space: pre-wrap;
    word-wrap: break-word;
    height: 36px; /* 小計のセルと同じ高さに設定 */
    overflow-y: auto; /* 内容が多い場合はスクロール */
}

/* PDF出力用のクラス - 点線の枠線を非表示にする */
.pdf-mode .editable,
.pdf-mode .date-input {
    border: none !important;
}

/* PDF出力時にプレースホルダーを非表示にする */
.pdf-mode .editable[data-placeholder]:before,
.pdf-mode .pdf-empty:before {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* PDF出力時のテーブル設定 - 備考のテーブルと同様の設定に統一 */
.pdf-mode .invoice-summary,
.pdf-mode .payment-table,
.pdf-mode .details-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 0.25px solid #000 !important;
}

/* PDF出力時のセル枠線を調整 - 外側の枠線のみ表示 */
.pdf-mode .invoice-summary td,
.pdf-mode .payment-header,
.pdf-mode .payment-cell,
.pdf-mode .details-table th,
.pdf-mode .details-table td {
    border: none !important;
}

/* 必要な内部のセル間の枠線のみを細く表示 */
/* 請求書サマリーの内部枠線 */
.pdf-mode .invoice-summary tr:not(:last-child) td {
    border-bottom: 0.25px solid #000 !important;
}

.pdf-mode .invoice-summary td:not(:last-child) {
    border-right: 0.25px solid #000 !important;
}

/* 支払い情報の内部枠線 */
.pdf-mode .payment-header {
    border-bottom: 0.25px solid #000 !important;
}

/* 入金期日と振込先の間の枠線 */
.pdf-mode .payment-table td:first-child {
    border-right: 0.25px solid #000 !important;
}

/* 請求書詳細の内部枠線 */
/* ヘッダー行の下の枠線 */
.pdf-mode .details-table tr:first-child th {
    border-bottom: 0.25px solid #000 !important;
}

/* その他の行の下の枠線 */
.pdf-mode .details-table tr:not(:last-child) td {
    border-bottom: 0.25px solid #000 !important;
}

/* 列間の枠線 */
.pdf-mode .details-table th:not(:last-child),
.pdf-mode .details-table td:not(:last-child) {
    border-right: 0.25px solid #000 !important;
}

/* 備考欄と内訳テーブルの設定 */
.pdf-mode .notes-section {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 0.25px solid #000 !important;
}

.pdf-mode .notes-title {
    border-bottom: 0.25px solid #000 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

.pdf-mode .tax-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 0.25px solid #000 !important;
}

/* PDF出力時に件名テーブルの枠線を非表示 */
.pdf-mode .project-table,
.pdf-mode .project-table td,
.pdf-mode .project-table .project-label,
.pdf-mode .project-table .project-value {
    border: none !important;
}

/* PDF出力時に内訳テーブルの内部セルの枠線を非表示に - テーブルの周りだけ表示 */
.pdf-mode .tax-table .tax-label-left,
.pdf-mode .tax-table .tax-label-right,
.pdf-mode .tax-table .tax-value {
    border: none !important;
}

/* ページ番号 */
.page-number {
    text-align: center;
    margin-top: 20px;
}

/* 日付入力フィールド */
.date-input {
    border: 1px dashed #1E90FF; /* 水色の点線 */
    height: 24px; /* 文字サイズの2倍程度に調整 */
    padding: 3px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s;
}

.date-input:hover {
    background-color: #f0f0f0;
}

.date-input:focus {
    outline: none;
    border: 1px solid #007bff;
    background-color: #fff;
}

/* 編集可能な要素 */
.editable {
    border: 1px dashed #1E90FF; /* 水色の点線に変更 */
    padding: 5px;
    min-height: 24px; /* 文字サイズの2倍程度に調整 */
    cursor: pointer;
    transition: background-color 0.2s;
    /* 要素のサイズが変わらないようにする */
    box-sizing: border-box;
    overflow: hidden;
    margin: 0; /* 余白をなくす */
    position: relative; /* プレースホルダー用 */
    line-height: 1.2; /* 行の高さを固定 */
}

/* プレースホルダーのスタイル */
.editable[data-placeholder]:empty:before {
    content: attr(data-placeholder);
    color: #aaa; /* うっすらと表示するための薄い色 */
    font-style: italic;
    opacity: 0.7; /* 透明度を設定 */
    pointer-events: none; /* クリックイベントを無効化 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px;
    white-space: pre-wrap; /* 改行を保持 */
    overflow: hidden;
    text-overflow: ellipsis;
    align-items: center; /* 縦方向に中央揃え */
    line-height: 1.6; /* 請求先フォームと同じ行間 */
}

/* 編集不可の要素 */
.editable.readonly {
    border: none; /* 境界線を削除 */
    cursor: default; /* 通常のカーソル */
    pointer-events: none; /* マウスイベントを無効化 */
    user-select: none; /* テキスト選択を無効化 */
}

.editable:hover {
    background-color: #f0f0f0;
}

/* 編集不可の要素はホバー時に背景色を変えない */
.editable.readonly:hover {
    background-color: transparent;
}

.editable:focus {
    outline: none;
    border: 1px solid #007bff;
    background-color: #fff;
}

/* 編集不可の要素はフォーカス時のスタイルも変えない */
.editable.readonly:focus {
    outline: none;
    border: none;
    background-color: transparent;
}

/* 複数行入力フォーム */
.multiline-input {
    white-space: pre-wrap;
    word-wrap: break-word;
    min-height: 100px;
    line-height: 1.5;
    width: 100%;
    text-align: left;
}

/* 請求先情報 */
.client-info .multiline-input {
    min-height: 120px;
}

/* 請求元情報 */
.sender-info .multiline-input {
    min-height: 100px;
    text-align: right;
    margin-left: auto; /* 要素自体を右寄せにする */
    width: 100%; /* 親要素の幅いっぱいに広げる */
}

/* 請求内容詳細テーブルのセル内の編集可能要素 */
.details-table td .editable {
    height: 30px; /* 固定の高さを設定 */
    min-height: 30px; /* 最小の高さも固定 */
    max-height: 30px; /* 最大の高さも固定 */
    min-width: 30px; /* 最小幅を設定 */
    border: 1px dashed #1E90FF; /* 水色の点線 */
    padding: 5px;
    box-sizing: border-box;
    text-align: center; /* テキストを中央揃えに */
    vertical-align: middle; /* 縦方向に中央揃え */
    display: flex; /* フレックスボックスとして表示 */
    align-items: center; /* 縦方向に中央揃え */
    width: 100%; /* 幅を100%に設定 */
    margin: 0; /* 余白なし */
    overflow: hidden; /* はみ出した内容を隠す */
    line-height: 1.2; /* 行の高さを固定 */
}

/* 明細金額の編集不可要素の境界線を削除 */
.details-table td .editable.readonly {
    border: none;
}

/* 摘要列のみ左寄せにする */
.details-table td:first-child .editable {
    text-align: left;
    justify-content: flex-start; /* 左寄せ */
}

/* テーブルのセルのパディングを調整 */
.details-table td {
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

/* コントロールボタン */
.controls {
    margin-top: 20px;
    text-align: center;
}

.controls button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    margin: 0 5px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.controls button:hover {
    background-color: #0056b3;
}

#share-link-container {
    margin-top: 15px;
    padding: 15px;
    background-color: #f0f0f0;
    border-radius: 4px;
    border: 2px solid #007bff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 100;
}

#share-link {
    width: 80%;
    padding: 8px;
    margin-right: 10px;
}

#copy-link {
    background-color: #28a745;
}

#copy-link:hover {
    background-color: #218838;
}

#reset-form {
    background-color: #dc3545;
}

#reset-form:hover {
    background-color: #c82333;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    .invoice-container {
        padding: 20px;
    }
    
    /* ヘッダー部分のフレックスコンテナを調整 */
    .invoice-header {
        flex-direction: column;
        display: flex;
    }
    
    /* 請求日/請求書番号を最初に表示 */
    .invoice-info {
        width: 100%;
        margin-bottom: 20px;
        text-align: left;
        order: 1;
    }
    
    /* 請求先を2番目に表示 */
    .client-info {
        width: 100%;
        margin-bottom: 20px;
        order: 2;
    }
    
    .invoice-date, .invoice-number {
        justify-content: flex-start;
    }
    
    /* 3行目のレイアウト調整 */
    .invoice-row {
        flex-direction: column;
        display: flex;
    }
    
    /* 請求元を3番目に表示 */
    .sender-info {
        width: 100%;
        margin-bottom: 20px;
        text-align: left;
        order: 3;
    }
    
    /* 件名/請求金額テーブルを4番目に表示 */
    .invoice-left {
        width: 100%;
        margin-bottom: 20px;
        order: 4;
    }
    
    .tax-row {
        justify-content: flex-start;
    }
    
    .controls button {
        margin-bottom: 10px;
    }
    
    #share-link {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* 480pxのメディアクエリを削除し、640px以下のスタイルを適用しないようにしました */

/* 税込み/税抜きトグルスイッチ */
.tax-mode-toggle {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #555;
    user-select: none;
}

.toggle-checkbox {
    display: none;
}

.toggle-slider {
    position: relative;
    width: 40px;
    height: 22px;
    background-color: #ccc;
    border-radius: 11px;
    transition: background-color 0.3s;
}

.toggle-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.toggle-checkbox:checked + .toggle-slider {
    background-color: #4a90d9;
}

.toggle-checkbox:checked + .toggle-slider::after {
    transform: translateX(18px);
}

/* PDF/画像出力時にトグルを非表示 */
.pdf-mode .tax-mode-toggle {
    display: none;
}