/* 会社間の請求書（SPEC §30）と月次集計。配色は style.css の変数を使う */
.sk-st { font-weight: 700; }
.sk-st-draft { color: var(--muted); }
.sk-st-issued { background: #e8f0fe; color: #1a4fb3; border-color: #b9cdf5; }
.sk-st-paid { background: #eef7f0; color: var(--success); border-color: #cdeed6; }
.sk-list-date { color: var(--muted); font-size: .85rem; }
.sk-grid label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 8px; }
.sk-grid input {
  display: block; width: 100%; padding: 10px 12px; margin-top: 4px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font-size: 1rem; min-height: 44px;
}
.sk-claim { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0 10px; border-bottom: 2px solid var(--text); margin-bottom: 6px; }
.sk-claim span { font-weight: 700; }
.sk-claim b { font-size: 1.6rem; }
.sk-paid-note { flex: 1 1 100%; }
.sk-row .mt-ro-line { font-size: .95rem; }

@media (min-width: 700px) {
  .sk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
}

/* 月次集計（admin のみ）。SB と RE は別法人なので、表を会社の向きごとに分ける */
.sk-period { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.sk-period label { display: block; font-size: .85rem; color: var(--muted); flex: 1 1 9em; }
.sk-period input {
  display: block; width: 100%; padding: 10px 12px; margin-top: 4px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font-size: 1rem; min-height: 44px;
}
.sk-period .btn { flex: 0 0 auto; }
.sk-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sk-quick .btn { min-height: 40px; }
.sk-table { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.sk-table th, .sk-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.sk-table th:first-child, .sk-table td:first-child { text-align: left; }
.sk-table thead th { color: var(--muted); font-size: .82rem; font-weight: 700; }
.sk-table tfoot td { font-weight: 800; border-top: 2px solid var(--text); border-bottom: 0; }
.sk-table tr.is-zero td { color: var(--muted); }
.sk-co-re h2 { color: #a35400; }
.sk-co-sb h2 { color: #1a4fb3; }
.sk-sum-note { color: var(--muted); font-size: .82rem; }
.sk-zero-note { display: none; color: var(--muted); font-size: .82rem; margin: 0 0 6px; }

@media (max-width: 640px) {
  .sk-table thead { display: none; }
  .sk-table, .sk-table tbody, .sk-table tfoot, .sk-table tr, .sk-table td { display: block; width: 100%; }
  .sk-table tr { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; padding: 4px 10px; }
  .sk-table td { display: flex; justify-content: space-between; gap: 10px; border-bottom: 0; padding: 4px 2px; text-align: right; }
  .sk-table td:first-child { font-weight: 800; }
  .sk-table td::before { content: attr(data-label); color: var(--muted); font-size: .8rem; font-weight: 400; text-align: left; }
  .sk-table td:first-child::before { content: ''; }
  .sk-table td:first-child { justify-content: flex-start; }
  /* スマホでは 0件の月を畳む（期間の計には入っている） */
  .sk-table tbody tr.is-zero { display: none; }
  .sk-zero-note { display: block; }
  .sk-table tfoot tr { border: 2px solid var(--text); }
  .sk-table tfoot td { border-top: 0; }
}

/* §31 取消・削除・複数の有効な請求書・明細の見出し */
.sk-st-void { background: var(--danger-bg); color: var(--danger); border-color: #f5c2bd; }
.sk-void-item .mt-ver-name, .sk-void-item .mt-ver-sum { text-decoration: line-through; color: var(--muted); }
.sk-void-text { color: var(--danger); font-weight: 700; white-space: pre-wrap; }
.sk-void-panel { border: 2px solid var(--danger); }
.sk-void-banner { color: var(--danger); font-weight: 700; white-space: pre-wrap; margin: 0 0 8px; }
.sk-multi { margin: 0 0 8px; padding: 10px 12px; border: 2px solid var(--danger); border-radius: var(--radius); background: var(--danger-bg); color: var(--danger); font-weight: 700; }
.sk-midashi { font-weight: 700; padding: 6px 0 4px; }
.sk-tk { border: 2px solid var(--danger); }
.sk-tk h2 { color: var(--danger); }
.sk-riyu-lb { display: block; font-size: .85rem; color: var(--muted); }
.sk-riyu-lb textarea { display: block; width: 100%; margin-top: 4px; }
textarea.is-bad { border-color: var(--danger); background: var(--danger-bg); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #b42318; border-color: #b42318; }
.btn-danger-ghost { color: var(--danger); border-color: #f5c2bd; }
.btn-danger-ghost:hover { background: var(--danger-bg); }
.hb-issued { margin: 8px 0; padding: 10px 12px; border: 2px solid #b9cdf5; border-radius: var(--radius); background: #e8f0fe; color: #1a4fb3; font-weight: 700; }