/* ============================================================
   B：引き算のミニマル
   色をほぼ使わず、余白と細い罫線と文字組みだけで見せる。
   ============================================================ */

:root {
  --bg: #fff;
  --bg-sub: #f7f7f7;
  --card: #fff;
  --line: #e7e7e7;
  --line-soft: #f2f2f2;
  --text: #111;
  --muted: #8b8b8b;
  --accent: #111;
  --danger: #b3382c;
  --ok: #2f6f4f;
}

* { box-sizing: border-box; }

/* hidden 属性を確実に効かせる。label.check などに display:flex を当てているせいで、
   ブラウザ標準の [hidden]{display:none} が負けて出てしまうため。 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

.mono, .num, td.num, th.num, .totals, .amount {
  font-variant-numeric: tabular-nums;
}

/* ---- ヘッダー ---- */
.topbar {
  display: flex;
  align-items: center;
  gap: 32px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 20px 40px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .16em;
}
.brand img {
  height: 19px;
  width: auto;
  display: block;
  /* 元の logo.png はブランド色（#9b8065）。この画面はモノクロなので文字と同じ黒に落とす。
     PDFの右上ロゴは同じファイルを色そのままで使うので、画像自体は加工しないこと。 */
  filter: brightness(0);
}
/* nav を伸ばしておいて、中で margin-left:auto を使って右寄せの組を作る。
   margin-right:auto のままだと nav が中身の幅しか持たず、中で右に寄せられない。 */
.topbar nav { display: flex; gap: 24px; flex: 1; }
/* 「メンバー（自分の設定）」から右は、書類のタブと分けて右端に寄せる */
.topbar nav .nav-right { margin-left: auto; }
.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 2px 0;
  font-size: 13px;
  letter-spacing: .04em;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.topbar nav a:hover { color: var(--text); }
.topbar nav a.on { color: var(--text); border-bottom-color: var(--text); }

/* 一覧が6列あるので、余白を活かしつつ折り返さない幅にする */
main { max-width: 1060px; margin: 0 auto; padding: 56px 40px 140px; }

h1 {
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -.02em;
  margin: 0 0 40px;
}

/* 非表示にした取引先の出し入れ。一覧の下にひっそり置く */
.archived-toggle {
  margin: 24px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.archived-toggle a { color: var(--muted); }
.archived-toggle a:hover { color: var(--text); }

/* ---- 取引先一覧の絞り込み ----
   検索欄と条件を1行に並べる。件数だけ右端に逃がす（margin-left: auto）。
   下の罫線は table.list の上罫線と重なると2本に見えるので、ここでは引かない。 */
.filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin-bottom: 26px;
}
/* 取引先ページは «追加フォーム → 検索 → 一覧» と続くので、境目に罫線を1本入れる。
   請求書一覧のようにフォームが無いページでは引かない（タブのすぐ下で線が重なるため） */
.card + .filters { border-top: 1px solid var(--line); padding-top: 28px; }
/* 条件が増えて検索欄が潰れると、何を探せるのかの説明（placeholder）が切れる。
   基準を広めに取り、それ以下になるくらいなら行を折り返させる */
.filters input[type=search] { flex: 1 1 280px; min-width: 230px; width: auto; }
.filters .check { flex: none; }
.filters .check > span { white-space: nowrap; }
.filters .pick { display: flex; align-items: center; gap: 10px; flex: none; }
.filters .pick > span { margin: 0; }
.filters .pick select { width: auto; min-width: 110px; }
/* 件数は検索欄の «下» に置く（2026-08-10、Halの指定）。
   .filters の中に入れると「3 件 / 12 件」と「12 件」で幅が変わり、そのたびに
   チェックや検索欄の位置がずれて、触っていないものが動いて見えるため。 */
.filter-count {
  margin: -14px 0 22px;
  text-align: right;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- ページ内のタブ（請求書ページの「取引先一覧 / 請求書一覧」）----
   h1 の代わりに置くので、下の余白は h1 と同じ 40px にそろえてある。
   バーの罫線は引かない。すぐ下に来る .card や table.list が自前で上罫線を持っていて、
   線が2本並んでしまうため。現在地は文字色と下線だけで示す（ヘッダーのナビと同じ作り）。 */
.tabs {
  display: flex;
  gap: 30px;
  margin: 0 0 40px;
}
.tabs a {
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--muted);
  text-decoration: none;
  padding: 0 0 10px;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--text); border-bottom-color: var(--text); }
h2 {
  font-size: 11px;
  margin: 0 0 20px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .18em;
}

.hint { color: var(--muted); font-size: 12.5px; }
/* 見出しの脇に添える弱い文字（敬称、「—」など） */
.quiet { color: var(--muted); font-weight: 400; }
h1 .quiet { font-size: 18px; margin-left: 6px; }
/* 表のセルの中で、主役の下にぶら下げる補足行（メモ、CC） */
.rowsub { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 2px; }

/* h1 と、その右に寄せる操作ボタン */
.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.page-head h1 { margin-bottom: 0; }
.page-head-actions { display: flex; gap: 12px; }
/* ページの途中に挟む小見出し。h2 の既定は上に余白が無いので、ここだけ空ける */
h2.section { margin-top: 44px; }

/* 署名のプレビューみたいな、そのまま見せたい文字のかたまり */
.preview-block {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.9;
  color: var(--text);
}
.warn-text { color: var(--danger); }
code {
  background: var(--bg-sub);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}

/* ---- お知らせ ---- */
.flashes { margin-bottom: 32px; }
.flash {
  padding: 14px 0 14px 16px;
  margin-bottom: 8px;
  border: none;
  border-left: 2px solid;
  white-space: pre-wrap;
  font-size: 13.5px;
  background: none;
}
.flash.ok { border-left-color: var(--ok); color: var(--text); }
.flash.warn { border-left-color: var(--danger); color: var(--text); }
.flash a { color: inherit; }

/* ---- カード（枠を持たず、余白と罫線で区切る）---- */
.card {
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 32px 0 40px;
  margin-bottom: 0;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
}
.grid .wide { grid-column: 1 / -1; }

/* 取引先の追加・編集フォームだけ «詰めた» 組み方にする（2026-08-10、Halの指定）。
   3列にして「会社名＋敬称」「担当者・メール・CC」をそれぞれ1行に収め、行間と
   見出しの下の余白も削ってある。狭い窓では1列に落とす（3列のままだと入力欄が潰れる）。 */
/* 入力が主役のページ（請求書フォーム）は、見出しの下も詰める */
h1.tight { margin-bottom: 24px; }
.card.tight { padding: 24px 0 28px; }
.card.tight h2 { margin-bottom: 16px; }
.card.tight .form-actions { margin-top: 22px; }
.grid.tight { grid-template-columns: repeat(3, 1fr); gap: 14px 28px; }
.grid.tight .span2 { grid-column: span 2; }
.grid.tight > label > span { margin-bottom: 3px; }
.grid.tight .check { margin-top: 6px; }
.grid.tight .hint { margin: 0; }
@media (max-width: 860px) {
  .grid.tight { grid-template-columns: 1fr; }
  .grid.tight .span2 { grid-column: 1 / -1; }
}

label { display: block; }
label > span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
  letter-spacing: .1em;
}
label.check { display: flex; align-items: center; gap: 10px; }
label.check > span { margin: 0; font-size: 13px; color: var(--text); letter-spacing: 0; }

input[type=text], input[type=number], input[type=date], input[type=password],
input[type=search], select, textarea {
  width: 100%;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-family: inherit;
  font-size: 15px;
  background: none;
  color: var(--text);
  transition: border-color .15s;
}
/* 1行に並べたとき、文字の位置と下の罫線をきっちり揃えるための高さ（2026-08-10）。
   line-height を書かないと «中身の高さ» をブラウザが型ごとに勝手に決めるので、
   実測で プルダウン 34px / テキスト 40px / 日付 42px とバラバラだった
   （請求先だけ上に浮いて見える）。line-height と height の両方を明示して揃える。
   textarea は行数で伸びるので height は付けない。 */
input[type=text], input[type=number], input[type=date], input[type=password],
input[type=search], select {
  height: 40px;
  line-height: 1.5;
}
input::placeholder, textarea::placeholder { color: #c8c8c8; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-bottom-color: var(--text);
}
select { padding: 8px 0; }
textarea {
  resize: vertical;
  line-height: 1.8;
  border: 1px solid var(--line);
  padding: 10px 12px;
}
.mono { font-family: "SF Mono", Menlo, monospace; }
input.num { text-align: right; }

/* ---- ボタン ---- */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--line);
  background: none;
  color: var(--text);
  border-radius: 0;
  font-size: 12.5px;
  font-family: inherit;
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.btn:hover { border-color: var(--text); }
.btn.primary { background: var(--text); border-color: var(--text); color: #fff; }
.btn.primary:hover { background: #333; border-color: #333; }
.btn.mail { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.mail:hover { background: #245640; border-color: #245640; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { border-color: var(--danger); }
.btn.small { padding: 5px 12px; font-size: 11.5px; }
form.inline { display: inline; }
.form-actions { margin-top: 32px; display: flex; gap: 12px; }

/* ---- 一覧テーブル（枠なし・行間広め）---- */
table.list {
  width: 100%;
  border-collapse: collapse;
  background: none;
  border: none;
  border-top: 1px solid var(--text);
  border-radius: 0;
}
table.list th {
  text-align: left;
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .16em;
  padding: 14px 16px 14px 0;
  background: none;
  border-bottom: 1px solid var(--line);
}
table.list td { padding: 18px 14px 18px 0; border-bottom: 1px solid var(--line-soft); }
/* 請求番号・日付・状態タグは途中で折らない */
table.list td.mono, .tag { white-space: nowrap; }
table.list tr:last-child td { border-bottom: 1px solid var(--line-soft); }
table.list tr.archived td { opacity: .4; }
/* 非表示の行は薄くするが、操作ボタンまで薄いと「表示する」が押しづらいので戻す */
table.list tr.archived td.actions { opacity: 1; }
/* 金額の右は広めに空ける。0 にすると隣の「状態」とくっつく */
table.list td.num, table.list th.num { text-align: right; padding-right: 26px; white-space: nowrap; }
table.list td.num { font-size: 15px; }
table.list td.actions { text-align: right; white-space: nowrap; padding-right: 0; }
table.list td.actions > * { margin-left: 6px; }
table.list a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid #d5d5d5;
}
table.list a:hover { border-bottom-color: var(--text); }

/* 「新しい請求書」の1歩目、取引先を選ぶ一覧。行のどこを押しても進めるので、
   押せる場所であることが分かるように指カーソルと薄い下地を出す */
table.list.pick tbody tr { cursor: pointer; }
table.list.pick tbody tr:hover td { background: var(--line-soft); }

.tag {
  display: inline-block;
  font-size: 10.5px;
  padding: 3px 10px;
  border-radius: 0;
  border: 1px solid var(--line);
  color: var(--muted);
  letter-spacing: .08em;
  background: none;
}
.tag.draft { border-color: #dcdcdc; color: #6f6f6f; }
.tag.issued { border-color: #bcbcbc; color: var(--text); }
.tag.sent { border-color: var(--ok); color: var(--ok); }

.empty {
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 96px 48px;
  text-align: center;
  color: var(--muted);
}
.empty a { color: var(--text); }
/* 検索が当たらなかったときみたいに、その場で出たり消えたりする軽い版 */
.empty.slim { padding: 40px 24px; }

/* ---- 明細の編集 ---- */
table.items-edit { width: 100%; border-collapse: collapse; }
table.items-edit th {
  text-align: left;
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .16em;
  padding-bottom: 12px;
}
table.items-edit th.w-qty { width: 90px; }
table.items-edit th.w-price { width: 130px; }
table.items-edit th.w-amt { width: 120px; text-align: right; }
table.items-edit th.w-del { width: 36px; }
table.items-edit td { padding: 6px 8px 6px 0; vertical-align: middle; }
table.items-edit td.amount { text-align: right; color: var(--muted); font-size: 13px; }

.totals {
  margin-top: 32px;
  margin-left: auto;
  width: 300px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.totals div { display: flex; justify-content: space-between; padding: 5px 0; }
.totals span { color: var(--muted); font-size: 12px; letter-spacing: .08em; }
.totals .grand {
  border-top: 1px solid var(--text);
  margin-top: 10px;
  padding-top: 14px;
  font-size: 22px;
  font-weight: 400;
}

/* ---- 下に貼りつく操作バー ---- */
.sticky-actions {
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding: 20px 0;
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

/* ---- 角印 ---- */
.stamp-row { display: flex; gap: 28px; align-items: flex-start; }
.stamp-row .grow { flex: 1 1 auto; }
.stamp-preview {
  /* 84px だと角印の4文字が潰れて読めなかったので広げた */
  width: 132px;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 8px;
  background: #fff;
}

/* ---- メール確認のポップアップ ---- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 24px;
}
.modal[hidden] { display: none; }
/* メール送信の窓。«送信する» までスクロールさせないため、縦は上から順に詰めてある：
   見出し・確認欄・宛先まわり・ボタンは高さが決まっていて、余りを本文が受け取る。
   縮む側（form と .mail-body）に min-height: 0 が要る。これが無いと flex は
   中身より小さくしてくれず、結局はみ出してボタンが下に隠れる。 */
.modal-box {
  background: #fff;
  border-radius: 0;
  padding: 28px 32px;
  width: min(680px, 100%);
  max-height: 90vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .35);
}
.modal-box h2 { font-size: 18px; color: var(--text); margin-bottom: 10px; letter-spacing: 0; font-weight: 400; }
.modal-box label { margin-bottom: 20px; }
.modal-box form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.modal-box .confirm-strip { margin: 12px 0 18px; padding: 12px 0; }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 12px; }

/* 宛先・CC・件名は見出しを左に置いて1行にする（縦積みだと3項目で 110px ほど食う） */
.modal-box .mail-head label {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}
.modal-box .mail-head label > span { margin: 0; }

/* 本文だけが余りを受け取る。rows="13" は «いちばん背が高いときの目安» で、
   画面が低いときはここまで縮む（下限 100px） */
.modal-box .mail-body { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 14px 0 0; }
.modal-box .mail-body textarea { flex: 1; min-height: 100px; }

.confirm-strip {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 18px 0;
  margin: 18px 0 28px;
}
.confirm-strip div { display: flex; flex-direction: column; gap: 3px; }
.confirm-strip span { font-size: 10.5px; color: var(--muted); letter-spacing: .12em; }
.confirm-strip b { font-size: 16px; font-weight: 400; }

/* ---- ログイン画面 ---- */
body.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background: #fff;
}
.auth-box {
  background: #fff;
  border: none;
  border-radius: 0;
  padding: 0;
  width: min(340px, 100%);
}
.auth-box.wide { width: min(420px, 100%); }
/* ログイン画面のロゴ＋見出し。横に並べて、2つまとめて中央に置く */
.auth-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 36px;
}
/* ロゴはヘッダーと同じで、元のブランド色を黒に落として使う */
.auth-logo {
  display: block;
  width: 52px;
  height: auto;
  flex: none;
  filter: brightness(0);
}
.auth-box h1 { font-size: 22px; margin-bottom: 36px; font-weight: 400; }
/* 横並びにした分、見出し側の余白は .auth-head が持つ。setup 画面（.auth-box.wide）はそのまま */
.auth-head h1 { margin: 0; }
.auth-box label { margin-bottom: 24px; }
.wide-btn { width: 100%; padding: 14px; margin-top: 12px; font-size: 13px; }

/* ---- ヘッダー右の自分の名前 ---- */
.topbar .me {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 16px;
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
.topbar .me span { font-size: 12px; color: var(--muted); letter-spacing: .04em; }

/* ---- 詰まった表 ---- */
table.list.compact td, table.list.compact th { padding: 12px 14px 12px 0; font-size: 12.5px; }
table.list td.nowrap, table.list th.nowrap { white-space: nowrap; }
/* 取引先一覧の «会社名» の列に下限を置く（2026-08-10）。
   日本語は好きなところで改行できるので、ブラウザの自動列幅だと会社名の列は
   «1文字まで詰められる» と判断される。一方おとなりの送付先メールは切れ目が無くて
   詰められないので、放っておくと会社名だけが痩せて「株式会社アオ／ゾラ印／刷」になる。
   下限を置くと会社名に 222px 回ってきて、表は 980px にちょうど収まる（実測）。
   nowrap は駄目。合計 1098px になって右にはみ出す。
   窓が 1000px より狭いときは下限を外す。効かせたままだと表が入りきらず、
   今度はページごと横スクロールになるため（そっちの方が困る）。 */
@media (min-width: 1000px) {
  table.list.clients th:first-child,
  table.list.clients td:first-child,
  /* 請求書を作るときの «誰に出す？» の一覧も同じ組み方（会社名＋メール）なので同じ下限 */
  table.list.pick th:first-child,
  table.list.pick td:first-child { min-width: 200px; }
}
/* その 200px を捻出するために、セルの右余白と操作ボタンの間隔を詰める。
   取引先一覧は7列＋操作ボタン5つで 980px を取り合っていて、既定のままだと 41px はみ出す
   （表が右にせり出して、上の検索欄と縦が揃わなくなる）。これでちょうど 980px に収まる
   （実測、取引先10件・admin表示）。数字の列だけは詰めすぎると隣とくっつくので 16px 残す。 */
table.list.clients td, table.list.clients th { padding-right: 8px; }
table.list.clients td.num, table.list.clients th.num { padding-right: 16px; }
table.list.clients td.actions { padding-right: 0; }
table.list.clients td.actions > * { margin-left: 4px; }

table.smtp-table th {
  text-align: left;
  width: 190px;
  color: var(--muted);
  font-weight: 600;
  background: none;
}

button:disabled, .btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
button:disabled:hover, .btn:disabled:hover { border-color: var(--line); background: none; }

/* ---- 送信履歴（月ごとの見出しと、月の絞り込み）---- */
/* h1 の右に置く絞り込み。select は既定で幅いっぱいなので、ここだけ幅を決める */
.filterbar { display: flex; align-items: flex-end; gap: 12px; }
.filterbar label > span { margin-bottom: 4px; }
.filterbar select { width: auto; min-width: 190px; font-size: 13px; }

/* 月の区切り。表の途中に挟む見出しの行。下だけ濃い罫線を引いて、
   その月のかたまりの「頭」に見えるようにしている */
table.list tr.month-head td {
  padding: 44px 0 10px;
  border-bottom: 1px solid var(--text);
  font-size: 13px;
  letter-spacing: .1em;
}
table.list tr.month-head .quiet { font-size: 11px; margin-left: 8px; letter-spacing: .08em; }
/* いちばん上の月は thead のすぐ下に来るので、上の余白を詰める */
table.list tbody tr.month-head:first-child td { padding-top: 22px; }


/* ---- 偽物モード（QA）の帯 ---------------------------------------------
   本番では出ない。手元だけ。目に入らないと意味がないので、色は強めにする。
   position:sticky にして、下にスクロールしても消えないようにしてある。
   （画面の上に出しているつもりで、スクロールすると消える＝見えていないのと同じ） */
.qa-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: repeating-linear-gradient(
    45deg, #b45309, #b45309 12px, #92400e 12px, #92400e 24px);
  color: #fff;
  padding: 7px 14px;
  font-size: 13px;
  letter-spacing: .02em;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.qa-banner strong {
  margin-right: .6em;
  padding: 1px 8px;
  border-radius: 3px;
  background: rgba(0,0,0,.35);
  font-weight: 700;
}