/* 配管 Frontend と同じ骨格（薄グレー地・白ヘッダー・白カード・細ボーダー）＋ダクトの橙アクセント。
   ダーク躯体はアプリ（現場の道具）専用＝事務ページは世間の管理画面の慣習に合わせる（ユーザー確定 2026-08-02）。 */
* { box-sizing: border-box; margin: 0; }
body {
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  background: #F9FAFB; color: #111827; min-height: 100vh;
}
header {
  background: #FFFFFF; padding: 14px 20px; display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
header h1 { font-size: 16px; font-weight: 700; color: #111827; }
header .spacer { flex: 1; }
main { max-width: 560px; margin: 24px auto; padding: 0 16px; display: grid; gap: 16px; }

.card {
  background: #FFFFFF; color: #111827; border: 1px solid #E5E7EB; border-radius: 12px;
  padding: 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.card h2 { font-size: 15px; margin-bottom: 12px; color: #111827; }
.card p  { font-size: 13px; line-height: 1.7; }
.muted { color: #6B7280; font-size: 12px; }

/* ようこそ見出し（配管 dashboard の welcome の型＝カードにしない） */
.page-title h1 { font-size: 22px; font-weight: 700; color: #111827; }
.page-title p { margin-top: 4px; }

label { display: block; font-size: 12px; color: #6B7280; margin: 10px 0 4px; }
input {
  width: 100%; padding: 12px; font-size: 15px; border: 1px solid #D1D5DB;
  border-radius: 8px; background: #FFFFFF;
}
input:focus { outline: 2px solid #E8730E; border-color: transparent; }

button {
  width: 100%; margin-top: 14px; padding: 13px; font-size: 15px; font-weight: 700;
  color: #fff; background: #E8730E; border: 0; border-radius: 8px; cursor: pointer;
}
button:hover { background: #B35F00; }
button:disabled { background: #D1D5DB; cursor: default; }
button.ghost { background: #FFFFFF; color: #374151; border: 1px solid #D1D5DB; }
button.ghost:hover { background: #F3F4F6; }
button.danger { background: #B3261E; }
button.danger:hover { background: #8C1D18; }
button.inline { width: auto; margin: 0; padding: 8px 14px; font-size: 12px; }

.row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #F3F4F6; }
.row:last-child { border-bottom: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.chip.ok   { background: #E7F2E9; color: #1E6B33; }
.chip.bad  { background: #F6E7E6; color: #8C1D18; }

.msg { padding: 12px; border-radius: 8px; font-size: 13px; display: none; }
.msg.error { display: block; background: #F6E7E6; color: #8C1D18; }
.msg.ok    { display: block; background: #E7F2E9; color: #1E6B33; }
.msg.warn  { display: block; background: #FDF0DF; color: #8A4B00; }   /* 成立したが要注意（例: メール不達） */

.linkbox {
  margin-top: 10px; padding: 10px; background: #F9FAFB; border: 1px dashed #D1D5DB;
  border-radius: 8px; font-size: 12px; word-break: break-all;
}
a { color: #B35F00; }
.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tabs button { margin: 0; padding: 9px; font-size: 13px; background: #F3F4F6; color: #6B7280; }
.tabs button.active { background: #E8730E; color: #fff; }

/* 状況カード（配管 dashboard の stat-card の型） */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat {
  background: #FFFFFF; color: #111827; border: 1px solid #E5E7EB; border-radius: 12px;
  padding: 16px 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.stat .stat-title { font-size: 12px; color: #6B7280; }
.stat .stat-value { font-size: 20px; font-weight: 700; margin-top: 6px; }
.stat .stat-sub { font-size: 11px; color: #6B7280; margin-top: 4px; }

/* 畳みカード＝操作は「見出し＋1行説明＋右の小ボタン」だけ見せ、押した時だけフォームを開く
   （読む情報と操作の顔を分ける＝ぱっと見の情報量を絞る）。 */
.card-head { display: flex; align-items: flex-start; gap: 12px; }
.card-head .grow { flex: 1; min-width: 0; }
.card-head h2 { margin-bottom: 2px; }
.card-head .inline { margin-top: 2px; flex-shrink: 0; }
.fold { margin-top: 12px; border-top: 1px solid #F3F4F6; padding-top: 4px; }

/* dashboard は配管と同じく1本の縦積み（.cols は段組せず並べるだけ） */
.cols { display: grid; gap: 16px; }
.cols .col { display: grid; gap: 16px; align-content: start; }

@media (max-width: 520px) {
  .stats { grid-template-columns: 1fr; }
}

@media (min-width: 960px) {
  /* ヘッダーの文字端を中身の端にそろえる（中身より外へ置き去りにしない） */
  header { padding-inline: max(20px, calc((100% - 860px) / 2)); }
  main.wide { max-width: 860px; }
}

/* Stripe への遷移中に全画面で待たせるオーバーレイ（checkout/portal・エラー時は hide で解除） */
.duct-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(255, 255, 255, 0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.duct-overlay .spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 4px solid #E5E7EB; border-top-color: #E8730E;
  animation: duct-spin 0.9s linear infinite;
}
.duct-overlay .label { color: #1F2937; font-size: 0.95rem; }
@keyframes duct-spin { to { transform: rotate(360deg); } }

/* 契約直後のオンボーディング＝配管 checkout/success.html の踏襲。
   「Web登録＝アプリ登録」の勘違い対策（配管で問い合わせ多発→この導線で沈静化した実績・2026-09-02 ユーザー指示）。
   2択ボタンでしか閉じられない＝案内をマストで通す。 */
.onboard-overlay {
  position: fixed; inset: 0; z-index: 2100;
  background: rgba(17, 24, 39, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.onboard-sheet {
  background: #fff; border-radius: 14px; max-width: 560px; width: 100%;
  padding: 28px 24px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  max-height: 90vh; overflow-y: auto;
}
.onboard-sheet h2 { color: #B35F00; font-size: 1.15rem; margin-bottom: 8px; }
.onboard-sheet .lead { color: #374151; font-size: 0.92rem; margin-bottom: 18px; }
.onboard-sheet h3 { font-size: 1rem; margin-bottom: 10px; }
.role-option {
  display: block; width: 100%; text-align: left; background: #fff;
  border: 2px solid #E5E7EB; border-radius: 10px; padding: 14px 16px;
  margin-bottom: 10px; cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.role-option:hover { border-color: #E8730E; background: #FFF7ED; }
.role-option strong { display: block; color: #1F2937; margin-bottom: 2px; }
.role-option span { display: block; color: #6B7280; font-size: 0.85rem; }
.card.attn { outline: 3px solid #E8730E; outline-offset: 2px; border-radius: 12px; }