/* =====================================================
   kd Invoice (document_system)
   Site Manager / File Share と同じデザイントークン・同じ部品を使う。
   :root 以下のトークンは3システムで共通。値を変えるときは他も揃えること。

   Site Manager版からの意図的な相違点:
     - .page / .topbar-inner の max-width を 1200px にしている
       （請求書一覧は列が多く、900pxでは収まらないため）
     - input[type=text] 等に width:100% を効かせていない
       （対象月・検索など横並びの入力欄があるため。フォーム画面で
         幅いっぱいにしたい入力欄は .field で囲む）
   ===================================================== */

:root {
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --ink: #1C1B1A;
  --ink-muted: #6B6862;
  --ink-faint: #A6A39B;
  --accent: #E8622C;
  --accent-dark: #B84A1E;
  --accent-tint: #FDECE3;
  --success: #2F8F5B;
  --success-tint: #E7F3EC;
  --warning: #B7791F;
  --warning-tint: #FBF1DF;
  --danger: #C0392B;
  --danger-tint: #FAE7E4;
  --border: #E5E3DF;
  --border-strong: #D3D0C9;
  --radius: 10px;
  --mono: "SF Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  --sans: -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  --page-width: 1200px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  font-family: var(--sans);
  color: var(--ink);
}

a { color: inherit; }

/* ---- topbar ---- */
.topbar {
  background: #203864;
  color: #fff;
  padding: 14px 0;
}
.topbar-inner {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wordmark-icon {
  width: 40px;
  height: 40px;
  display: block;
  flex-shrink: 0;
}
.wordmark {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.wordmark span { color: var(--accent); }
.wordmark-tagline {
  font-size: 11px;
  color: #96A3C4;
  margin-left: 2px;
}
.topbar-right { font-size: 13px; }
.topbar-link {
  color: #fff;
  text-decoration: none;
  border: 1px solid #fff;
  border-radius: var(--radius);
  padding: 6px 16px;
  display: inline-block;
}
.topbar-link:hover { background: rgba(255, 255, 255, 0.12); }

/* ---- tab bar ----
   見た目だけのタブ。中身はそれぞれ別ページで、選択中は下線と文字色で示す。 */
.tab-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.tab-bar-inner {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 4px;
}
.tab {
  display: inline-block;
  padding: 14px 16px 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--ink-muted); }
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---- page ---- */
.page {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 28px 24px 60px;
}
.breadcrumb {
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.breadcrumb a { color: var(--ink-muted); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.page-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px;
}
.section-title {
  font-size: 15px;
  font-weight: 700;
  margin: 28px 0 12px;
}
.hint { font-size: 12px; color: var(--ink-muted); }

/* ---- flash ---- */
.flash {
  background: var(--accent-tint);
  color: var(--accent-dark);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}
.flash p { margin: 2px 0; }
.flash-success { background: var(--success-tint); color: var(--success); }
.flash-error { background: var(--danger-tint); color: var(--danger); }

/* ---- cards / forms ---- */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 16px;
}
.form-card.tight { padding: 16px 20px; }

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.field input, .field select, .field textarea { width: 100%; }

input[type=text], input[type=month], input[type=date],
input[type=number], input[type=password], select, textarea {
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--sans);
  background: #fff;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
select:disabled { background: #F1EFEA; color: var(--ink-faint); cursor: not-allowed; }

/* 数値入力欄のスピンボタン（▲▼）は誤操作のもとなので隠す */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* ---- buttons ---- */
.btn-primary, button.btn-primary, a.btn-primary {
  display: inline-block;
  padding: 9px 18px;
  background: var(--accent);
  color: #fff !important;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--sans);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn-primary:hover { background: var(--accent-dark); }
.btn-primary.small { padding: 6px 12px; font-size: 12px; }
.btn-primary.full { width: 100%; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--sans);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn-ghost:hover { border-color: var(--ink-faint); }
.btn-ghost.new {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 700;
}
.btn-ghost.new:hover { background: var(--accent-dark); }
.btn-ghost.danger { color: var(--danger); border-color: var(--border-strong); }
.btn-ghost.danger:hover { border-color: var(--danger); background: var(--danger-tint); }
.btn-ghost.small { padding: 5px 10px; font-size: 12px; }

.link { color: var(--ink); text-decoration: none; }
.link:hover { color: var(--accent); text-decoration: underline; }

/* ---- stat row ---- */
.stat-row { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.stat-chip {
  flex: 1;
  min-width: 120px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
}
.stat-chip .label { font-size: 11px; color: var(--ink-muted); margin-bottom: 4px; }
.stat-chip .value { font-size: 18px; font-weight: 700; font-family: var(--mono); }
.stat-chip.accent .value { color: var(--accent); }

/* ラベルと値を改行せず1行に並べるバリエーション */
.stat-chip.inline { display: flex; align-items: center; gap: 12px; }
.stat-chip.inline .label { margin-bottom: 0; white-space: nowrap; }

/* クライアント絞り込みを stat-chip の中に置くためのバリエーション */
.stat-chip form { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; margin: 0; }
.stat-chip select { flex: 1; min-width: 0; padding: 6px 10px; font-size: 13px; }

/* ボタンとその補助チェックボックスを縦に積む
   （チェックボックスは、どのボタンに対する指定なのかが分かるよう真下に置く） */
.toolbar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; align-items: flex-start; }
.action-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}

/* ---- filter bar ----
   対象月の移動・クライアント絞り込み・検索を1枚のカードに収める。 */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.filter-bar form { display: flex; align-items: center; gap: 8px; margin: 0; }
.filter-bar label { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.filter-sep { flex: 1; }
.current-month { font-size: 15px; font-weight: 700; white-space: nowrap; }

.icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--border-strong);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-muted);
  text-decoration: none;
  padding: 0;
}
.icon-btn:hover { border-color: var(--ink-faint); color: var(--ink); }
.icon-btn.danger:hover { border-color: var(--danger); color: var(--danger); }

.check-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* ---- status pill ---- */
.status-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
}
.status-pill.active   { background: var(--success-tint); color: var(--success); }
.status-pill.draft    { background: #F1EFEA; color: var(--ink-faint); }
.status-pill.issued   { background: var(--warning-tint); color: var(--warning); }
.status-pill.adopted  { background: var(--success-tint); color: var(--success); }
.status-pill.cancelled{ background: var(--danger-tint); color: var(--danger); }
.status-pill.archive  { background: #F1EFEA; color: var(--ink-faint); }

/* ---- data table ----
   一覧系の表。カード（白・枠線・角丸）の中に収まるように、
   角丸のはみ出しを .table-card 側の overflow:hidden で処理している。 */
.table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
/* table-layout:fixed + colgroup で列幅を固定する。
   自動計算のままだと、その月に入っているクライアント名や案件名の長さで
   毎月レイアウトが動いてしまうため。はみ出す文字は「…」で省略し、
   全文は title 属性（マウスオーバー）で読めるようにしている。 */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.data-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
  background: var(--bg);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #FCFBF9; }
.data-table .num { font-family: var(--mono); text-align: right; white-space: nowrap; }
.data-table .mono { font-family: var(--mono); white-space: nowrap; }
.data-table .center { text-align: center; }
.data-table th, .data-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* アイコンやチェックボックスだけを置くセル。
   中身が列幅をわずかに超えると「…」が出てしまうため、
   省略記号を出さず、左右の余白も詰める。 */
.data-table th.center, .data-table td.center {
  text-overflow: clip;
  padding-left: 6px;
  padding-right: 6px;
}
/* 省略表示する列。中のリンクごと省略させるため block 扱いにする */
.data-table .ellip a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-table a { text-decoration: none; }
.data-table a:hover { text-decoration: underline; }
.sort-link { color: var(--ink-muted); text-decoration: none; font-weight: 700; }
.sort-link:hover { color: var(--ink); }
.sort-link.on { color: var(--accent); }

.table-foot {
  display: flex;
  justify-content: flex-end;
  padding: 12px 0 0;
}

.empty-note {
  color: var(--ink-muted);
  font-size: 13px;
  padding: 28px 4px;
  text-align: center;
}

/* ---- footer ---- */
.footer {
  background: none;
  color: var(--ink-muted);
  text-align: center;
  padding: 10px 20px 20px;
  font-size: 11px;
  margin-top: 48px;
  border-top: 1px solid var(--border);
}

/* ---- narrow screens ---- */
@media (max-width: 900px) {
  .filter-bar { align-items: flex-start; }
  .filter-sep { display: none; }
  .table-card { overflow-x: auto; }
}

/* =====================================================
   フォーム画面・詳細画面用の追加部品（フェーズ2）
   ===================================================== */

/* 3列のフィールドグリッド。.wide を付けると1行を占有する */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid .field { margin-bottom: 0; }
.grid .field.wide { grid-column: 1 / -1; }
@media (max-width: 820px) {
  .grid { grid-template-columns: 1fr; }
}

/* 明細など「セルの中に入力欄がある」表。
   閲覧用の .data-table とは余白・折り返しの扱いが違うので別クラスにする。 */
.items-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.items-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
  background: var(--bg);
  padding: 8px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.items-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.items-table tbody tr:last-child td { border-bottom: none; }
.items-table input, .items-table select { width: 100%; padding: 7px 10px; font-size: 13px; }
.items-table .num { text-align: right; }
.items-table .amount-cell { text-align: right; white-space: nowrap; font-family: var(--mono); }
/* 停止中の定期項目。状態セレクトだけは操作できることが分かるよう薄くしない */
.items-table tr.inactive td, .items-table tr.inactive td input { opacity: 0.55; }
.items-table tr.inactive td select { opacity: 1; }

/* 合計欄 */
.totals { margin-left: auto; width: 340px; margin-top: 18px; font-size: 14px; }
.totals-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }
.totals-row .v { font-family: var(--mono); }
.totals-row input { width: 130px; text-align: right; }
.totals-row.grand {
  font-weight: 700;
  font-size: 17px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 12px;
}
.totals-row.grand .v { color: var(--accent); }

/* 詳細画面のプロフィール */
.profile-grid { display: grid; grid-template-columns: 150px 1fr; gap: 12px 20px; font-size: 14px; margin: 0; }
.profile-grid dt { color: var(--ink-muted); font-size: 13px; }
.profile-grid dd { margin: 0; }

/* 画面下部の操作ボタン群 */
.form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 20px 0 40px;
}
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }

/* status-pill の追加バリエーション */
.status-pill.superseded { background: #F1EFEA; color: var(--ink-faint); }
.status-pill.inactive   { background: #F1EFEA; color: var(--ink-faint); }
.status-pill.none       { background: #F1EFEA; color: var(--ink-faint); }
.status-pill.email      { background: var(--accent-tint); color: var(--accent-dark); }
.status-pill.upload     { background: #EDF1F8; color: #3A5488; }
.status-pill.abacus     { background: var(--warning-tint); color: var(--warning); }
.status-pill.invoice    { background: #EDF1F8; color: #3A5488; }

/* 編集不可のときのカード内注意書き */
.card-note {
  background: var(--warning-tint);
  color: var(--warning);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}

.footer a {
    color: inherit;
    text-decoration: none;
}

.footer a:hover {
    opacity: .75;
}