/* ============================================================
   工番ヘッダー & 単価編集パネル コンパクト化
   + 保存・本出力ボタンを単価編集パネルに統合
   + 明細エリアのみスクロール(画面全体は固定)
   ============================================================
   ★ 既存 invoice.css の後に読み込む
   ★ invoice-table.js の修正版とセットで使用
   ============================================================ */

/* ============================================================
   1. 画面全体スクロール禁止 → 明細だけ内側スクロール
   ============================================================ */
html, body {
  overflow: hidden;
}

.main-panel {
  overflow: hidden;
  height: 100vh;
}

.edit-area {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* JSが style.display = 'block' を設定するので flex に強制上書き */
.edit-area[style*="display: block"],
.edit-area[style*="display:block"] {
  display: flex !important;
}

/* 固定領域(縮まない) */
.edit-area > .invoice-header,
.edit-area > .price-panel-placeholder,
.edit-area > .price-edit-panel,
.edit-area > .invoice-total-area {
  flex: 0 0 auto;
}

/* 明細テーブル: 残り全部スクロール */
.edit-area > .invoice-table-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

/* ============================================================
   2. 工番ヘッダー(.invoice-header) を1行に圧縮
   ============================================================ */
.invoice-header {
  padding: 8px 24px;
  border-bottom-width: 2px;
  align-items: center;
  gap: 16px;
}
.job-no-display {
  font-size: 22px;
  letter-spacing: 0;
}
.invoice-header .customer-badge {
  font-size: 12px;
  padding: 3px 10px;
}
.invoice-header-right {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px 16px;
}
.invoice-header-right .header-row {
  margin-bottom: 0;
  font-size: 13px;
}

/* ============================================================
   3. 単価集計パネル(.price-panel-placeholder) コンパクト化
   ============================================================ */
.price-panel-placeholder {
  margin: 6px 24px;
  padding: 6px 12px;
  border-width: 1px;
}
.price-panel-placeholder .price-panel-title {
  font-size: 13px;
  margin-bottom: 4px;
}
.price-panel-placeholder .price-summary {
  gap: 6px;
}
.price-panel-placeholder .price-chip {
  padding: 3px 8px;
  font-size: 12px;
  border-width: 1px;
}
.price-panel-placeholder .price-chip b {
  font-size: 13px;
}

/* ============================================================
   4. 💰 単価別 一括変更パネル
      タイトル行に [タイトル / 保存ステータス / 保存 / 本出力] を横並び
   ============================================================ */
.price-edit-panel {
  margin: 6px 24px;
  padding: 6px 12px;
  border-width: 1px;
}

/* タイトル行を横並び flex に */
.price-edit-panel .price-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 4px;
}

.price-edit-panel .price-panel-title-text {
  flex: 0 0 auto;
  font-weight: bold;
  color: #4e342e;
}

/* 右側のボタン群 */
.price-edit-panel .price-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* 統合された保存ステータス */
.price-edit-panel .save-status {
  font-size: 12px;
  margin-left: 0;
  padding: 3px 8px;
}

/* 統合された保存・本出力ボタン */
.price-edit-panel .btn {
  font-size: 13px;
  padding: 5px 14px;
  margin: 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.15s;
}

.price-edit-panel .btn-save {
  background: #2e7d32;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.price-edit-panel .btn-save:hover:not(:disabled) {
  background: #1b5e20;
}
.price-edit-panel .btn-save:disabled {
  background: #9e9e9e;
  color: #eee;
  cursor: wait;
}

.price-edit-panel .btn-finalize {
  background: #d84315;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.price-edit-panel .btn-finalize:hover:not(:disabled) {
  background: #bf360c;
}
.price-edit-panel .btn-finalize:disabled {
  background: #9e9e9e;
  color: #eee;
  cursor: wait;
}

/* モード切替バーを1行に */
.price-edit-mode-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  padding: 0;
}
.price-edit-mode-bar .mode-label {
  font-size: 12px;
  white-space: nowrap;
}
.price-edit-mode-bar .mode-btn {
  padding: 3px 10px;
  font-size: 12px;
}
.price-edit-mode-bar .mode-hint {
  margin-left: auto;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* 単価編集テーブルのセルを詰める */
.price-edit-table th {
  padding: 3px 10px;
  font-size: 12px;
}
.price-edit-table td {
  padding: 3px 10px;
  font-size: 13px;
}
.price-edit-table .price-current {
  font-size: 14px;
}
.price-new-input {
  padding: 3px 8px;
  font-size: 13px;
  border-width: 1px;
}
.btn-bulk-change {
  font-size: 13px;
  padding: 5px 14px;
}

.price-edit-hint {
  margin-top: 4px;
  font-size: 11px;
}

/* ============================================================
   5. 合計エリア コンパクト化
   ============================================================ */
.invoice-total-area {
  margin: 6px 24px 6px;
  padding: 8px 18px;
  font-size: 14px;
}
.invoice-total-area .total-amount {
  font-size: 22px;
}
.invoice-total-area .total-weight {
  font-size: 16px;
}

/* ============================================================
   6. 旧アクションエリアは非表示(JS修正版では生成されないが念のため)
   ============================================================ */
.edit-area > .invoice-action-area {
  display: none !important;
}
/* ============================================================
   7. 客先名バッジを見やすく（小さすぎ＋白文字対策）
   ------------------------------------------------------------
   ・コンパクト化で 12px まで縮んでいたのを拡大
   ・変種クラス(badge-e2 等)が当たらなかった場合の保険として
     ベースに濃色背景を持たせ、白文字が地と同化しないようにする
   ・濃い縁取り(text-shadow)で淡い地でも白文字が読めるようにする
   ※ badge-e2(#0d47a1) などの色分けはそのまま維持
   ============================================================ */
.customer-badge {
  background: #455a64; /* 保険: 変種クラス無し時の濃色地（変種が当たれば上書きされる） */
}
.invoice-header .customer-badge {
  font-size: 16px;
  padding: 4px 14px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

/* ============================================================
   8. 印刷時はプレビューオーバーレイだけを印字（アプリ画面は隠す）
   ------------------------------------------------------------
   invoice-print.js が印刷直前に <html>/<body> へ .invoice-printing を付与する。
   そのときだけアプリ画面(.invoice-app)を隠し、オーバーレイだけを印字する。
   ※ 用紙の向き（レーザー=横 / 鋼材=縦）は invoice-print.js が @page を
     動的注入して制御するので、ここでは向きは一切指定しない。
   ============================================================ */
@media print {
  /* 印刷ボタン経由のときだけアプリ画面を非表示（通常のCtrl+Pには影響しない） */
  body.invoice-printing .invoice-app { display: none !important; }

  /* オーバーレイは <html> 直下にあるので html 始点で指定 */
  html.invoice-printing #invoicePrintOverlay {
    position: static !important;
    inset: auto !important;
    background: #fff !important;
    overflow: visible !important;
    display: block !important;
  }
  /* ツールバー(印刷する/閉じる)は印字しない */
  #invoicePrintOverlay .invoice-print-toolbar,
  #invoicePrintOverlay [data-no-print="true"] { display: none !important; }

  #invoicePrintOverlay .invoice-print-scroll {
    overflow: visible !important;
    padding: 0 !important;
    display: block !important;
  }
  #invoicePrintOverlay .invoice-print-page {
    box-shadow: none !important;
    margin: 0 auto !important;
  }
}