/* ============================================================
   ReAM — 共通コンポーネント v1.0
   requires: tokens.css
   ============================================================ */

/* ---------- Status chip (金額3状態 + 補助) ------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px 0 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.chip svg { width: 13px; height: 13px; flex: none; }

/* 確定 — outlined green */
.chip--ok   { color: var(--ok);   background: var(--ok-bg);   border-color: var(--ok-border); }
/* 支払済 — solid green (strongest) */
.chip--paid { color: #fff; background: var(--ok-strong); border-color: var(--ok-strong); }
/* 暫定 — soft slate */
.chip--prov { color: var(--prov); background: var(--prov-bg); border-color: var(--prov-border); }
/* 保留 — amber */
.chip--hold { color: var(--hold); background: var(--hold-bg); border-color: var(--hold-border); }
/* SLA超過 — red */
.chip--alert{ color: var(--alert); background: var(--alert-bg); border-color: var(--alert-border); }

/* dot-only variant for dense tables */
.dot { display:inline-block; width:8px; height:8px; border-radius:999px; vertical-align:middle; }
.dot--ok{background:var(--ok);} .dot--paid{background:var(--ok-strong);}
.dot--prov{background:var(--prov);} .dot--hold{background:var(--hold);} .dot--alert{background:var(--alert);}

/* ---------- Count badge ------------------------------------- */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--surface-3); color: var(--ink-2);
}
.badge--hold  { background: var(--hold-bg);  color: var(--hold); }
.badge--alert { background: var(--alert);    color: #fff; }
.badge--brand { background: var(--brand);    color: #fff; }

/* ---------- Buttons ----------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border-radius: var(--r-md); border: 1px solid transparent;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .12s, border-color .12s, box-shadow .12s;
  white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-hover); }
.btn--secondary { background: var(--surface); color: var(--ink-1); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--surface-2); border-color: #b9bfc9; }
.btn--ghost { background: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-3); color: var(--ink-1); }
.btn--danger { background: var(--alert); color: #fff; }
.btn--danger:hover { background: #a8281c; }
.btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Alert banner (SLA / 凍結波及) -------------------- */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-radius: var(--r-md);
  border: 1px solid var(--alert-border); background: var(--alert-bg);
  font-size: 13px; line-height: 1.55; color: var(--ink-1);
}
.alert svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--alert); }
.alert--hold { border-color: var(--hold-border); background: var(--hold-bg); }
.alert--hold svg { color: var(--hold); }
.alert strong { font-weight: 700; }

/* ---------- Table ------------------------------------------- */
.tbl {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
}
.tbl thead th {
  text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: .03em;
  color: var(--ink-3); text-transform: none;
  padding: 9px 14px; background: var(--surface-3);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tbl tbody td {
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  color: var(--ink-1); vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl .r { text-align: right; }
.tbl .neg { color: var(--alert); }
.tbl .muted { color: var(--ink-3); }
/* row state accent (left border) */
.tbl tr.row--hold td:first-child { box-shadow: inset 3px 0 0 var(--hold); }
.tbl tr.row--ok   td:first-child { box-shadow: inset 3px 0 0 var(--ok); }

/* ---------- 画面遷移リンク -----------------------------------
   共通ルール：他の画面・ビューへ遷移させるテキストや
   アフォーダンス（リンク・カードの「→」矢印・遷移先ラベル）は
   必ず青色基調（--brand）で表現する。状態色や本文色は流用しない。 */
.link, a.link {
  color: var(--brand); text-decoration: none; font-weight: 600; cursor: pointer;
}
.link:hover { color: var(--brand-hover); text-decoration: underline; }
/* 遷移を示す矢印（カード等）— 既定から青、hover で深める */
.nav-arrow { color: var(--brand); transition: color .14s, transform .14s; }
*:hover > .nav-arrow { color: var(--brand-hover); transform: translateX(3px); }

/* BANYAN ロゴマーク — 数字フォント比較.html のバンヤンツリーSVGを brand-mark として共有定義（デザインの意図に忠実） */
.brand-mark{width:26px;height:26px;flex:none;display:inline-block;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20120%20120%27%20fill%3D%27none%27%20stroke%3D%27%232f56c8%27%20stroke-width%3D%276.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%20transform%3D%27translate(0%20-12)%27%3E%3Cpath%20d%3D%27M60%20104L60%2060%27%2F%3E%3Cpath%20d%3D%27M60%2074C45%2072%2038%2059%2042%2049C53%2051%2060%2063%2060%2074%27%2F%3E%3Cpath%20d%3D%27M60%2066C75%2064%2082%2051%2078%2041C67%2043%2060%2055%2060%2066%27%2F%3E%3Ccircle%20cx%3D%2760%27%20cy%3D%2752%27%20r%3D%276.5%27%20fill%3D%27%232f56c8%27%20stroke%3D%27none%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / 21px 21px;}
.logo .brand-name{font-weight:700;font-size:15px;color:var(--ink-1);letter-spacing:.01em;}