/* camomile 代理店管理ツール — 見た目はここだけ。ページごとに CSS を書かない。
 *
 * 配色は葡萄色（ワインレッド）× ベージュ。**青とオレンジは使わない。**
 * 状態バッジの色も、赤系（対象外・異議あり）と葡萄色がぶつからないように
 * 明度で離してある。増やすときは下の一覧に足すこと。 */
:root{
  --wine:#4A1F2B;        /* ヘッダー・見出し・主ボタン */
  --wine-2:#5E2A38;      /* ナビ */
  --accent:#8C4A5C;      /* 押させたいボタン・選択中の下線 */
  --accent-2:#B07C89;    /* 補助線・フォーカス */
  --ink:#2A2024; --muted:#7A6E72; --line:#E6DED8;
  --bg:#F6F2EE;          /* ベージュ */
  --card:#fff; --head:#F1EAE5;
  --ok:#1F6B45; --ng:#A3291B;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  color:var(--ink); background:var(--bg); font-size:15px; line-height:1.7;
}
a{color:var(--accent)}
h1,h2,h3{line-height:1.4; margin:0 0 12px}
h1{font-size:22px} h2{font-size:18px; margin-top:28px} h3{font-size:16px}

/* ── ヘッダーと左のメニュー ───────────────────────
 * ヘッダーは上に固定、メニューは左に固定。
 * **メニューと本文はそれぞれ別にスクロールする。**
 * 本文をどれだけ下げてもメニューは動かず、メニューが長くなったら
 * メニューの中だけがスクロールする。
 *
 * 中身のあるページ（ログイン後）は body に .app が付く（app.js の boot が付ける）。
 * ログイン・申請・初期設定の1枚ものには付かないので、余白がずれない。 */
header.top{
  background:var(--wine); color:#fff; padding:0 20px;
  position:fixed; top:0; left:0; right:0; z-index:20;
}
header.top .inner{display:flex; align-items:center; gap:16px; height:56px}
header.top .logo{font-weight:700; letter-spacing:.04em; font-size:17px; color:#fff; text-decoration:none}
header.top .logo span{color:var(--accent-2)}
header.top .area{font-size:14px; color:#E0CBD3; padding-left:14px; border-left:1px solid rgba(255,255,255,.22)}
header.top .who{margin-left:auto; font-size:13px; color:#E0CBD3; display:flex; align-items:center; gap:12px}
header.top .who b{color:#fff; font-weight:600}

body.app{padding-top:56px; padding-left:210px}

nav.main{
  background:var(--wine-2);
  position:fixed; top:56px; left:0; bottom:0; width:210px; z-index:15;
  overflow-y:auto; overflow-x:hidden;   /* ← ここが「独立スクロール」 */
  overscroll-behavior:contain;          /* 端まで来ても本文を巻き込まない */
  padding:10px 0;
}
nav.main .inner{display:block}
nav.main a{
  display:block; color:#E0CBD3; text-decoration:none; padding:11px 18px; font-size:14px;
  border-left:3px solid transparent; white-space:nowrap;
}
nav.main a:hover{color:#fff; background:rgba(255,255,255,.08)}
nav.main a.on{color:#fff; border-left-color:var(--accent-2); background:rgba(255,255,255,.10); font-weight:600}
/* 細いスクロールバー。出しっぱなしにしない */
nav.main::-webkit-scrollbar{width:8px}
nav.main::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22); border-radius:4px}
nav.main::-webkit-scrollbar-track{background:transparent}

main{max-width:1180px; margin:0 auto; padding:24px 24px 80px}

/* ── 箱 ────────────────────────────────────────── */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:18px}
.card > h2:first-child, .card > h3:first-child{margin-top:0}
.grid{display:grid; gap:14px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px}
a.stat:hover{border-color:var(--accent-2)}
.stat .n{font-size:28px; font-weight:700; color:var(--wine); line-height:1.2}
.stat .l{font-size:13px; color:var(--muted)}

/* ── 表 ────────────────────────────────────────── */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
/* 狭い画面では折り返さず横スクロールさせる。列が潰れて読めなくなるのを防ぐ */
.tablewrap > table{min-width:820px}
table{width:100%; border-collapse:collapse; font-size:14px; background:#fff}
th,td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
th{background:var(--head); color:var(--wine); font-weight:600; white-space:nowrap; font-size:13px}
tbody tr:hover{background:#FBF8F6}
td.num,th.num{text-align:right; white-space:nowrap}
td .row{flex-wrap:nowrap}
dialog table, dialog .tablewrap > table{min-width:0}
.empty{padding:40px 10px; text-align:center; color:var(--muted)}

/* ── 状態バッジ ────────────────────────────────── */
.badge{display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap}
.badge.gray  {background:#EDE7E3; color:#6B6167}   /* 中立・未処理でないもの */
.badge.plum  {background:#F2E4EA; color:#7A3550}   /* 進行中（薄い葡萄） */
.badge.solid {background:var(--wine-2); color:#fff}/* 進行の節目（濃い葡萄） */
.badge.green {background:#E1EEE5; color:var(--ok)} /* 成約・支払対象・確認済 */
.badge.yellow{background:#F2EFD9; color:#5F5A0F}   /* 判定中・商談済（橙に寄らない黄）*/
.badge.violet{background:#EFE7F4; color:#5E3B7A}   /* 日程確定 */
.badge.red   {background:#F8E3E0; color:var(--ng)} /* 対象外・異議あり・停止 */

/* ── 部品 ──────────────────────────────────────── */
button,.btn{
  font:inherit; font-size:14px; padding:8px 16px; border-radius:7px; border:1px solid var(--wine);
  background:var(--wine); color:#fff; cursor:pointer; text-decoration:none; display:inline-block;
}
button:hover,.btn:hover{opacity:.88}
button:disabled{opacity:.45; cursor:not-allowed}
.btn-2{background:#fff; color:var(--wine)}
.btn-o{background:var(--accent); border-color:var(--accent)}
.btn-d{background:#fff; color:var(--ng); border-color:#E3B9B2}
.btn-s{padding:5px 11px; font-size:13px}
.row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.right{margin-left:auto}

label{display:block; font-size:13px; font-weight:600; color:var(--wine); margin:12px 0 4px}
label .opt{font-weight:400; color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=month],input[type=file],select,textarea{
  font:inherit; font-size:15px; width:100%; padding:9px 11px; border:1px solid #D8CCC6;
  border-radius:7px; background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid #DCC2CB; border-color:var(--accent-2)}
textarea{min-height:90px; resize:vertical}
.hint{font-size:12.5px; color:var(--muted); margin-top:4px}
.fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0 16px}

.msg{padding:11px 14px; border-radius:7px; margin:12px 0; font-size:14px; display:none}
.msg.show{display:block}
.msg.err {background:#F8E3E0; color:#8C2418; border:1px solid #EFC7C0}
.msg.ok  {background:#E1EEE5; color:#16603C; border:1px solid #BBDCC7}
.msg.info{background:#F3EBEE; color:var(--wine-2); border:1px solid #E0CBD3}

dialog{border:none; border-radius:12px; padding:0; max-width:640px; width:calc(100% - 32px)}
dialog::backdrop{background:rgba(42,32,36,.55)}
dialog .head{background:var(--wine); color:#fff; padding:14px 20px; font-weight:600}
dialog .body{padding:20px; max-height:70vh; overflow:auto}
dialog .foot{padding:14px 20px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end}

.secretbox{background:#FBF6F2; border:1px solid #E2D2C6; border-radius:8px; padding:14px 16px; margin:12px 0}
.secretbox code{font-size:17px; font-weight:700; letter-spacing:.06em; background:#fff; padding:3px 9px; border-radius:5px; border:1px solid #E0CBD3}

/* ── ログイン・申請の1枚もの ───────────────────── */
.solo{max-width:430px; margin:8vh auto; padding:0 20px}
.solo .card{padding:28px}
.solo .brand{text-align:center; margin-bottom:22px}
.solo .brand .t{font-size:26px; font-weight:700; color:var(--wine); letter-spacing:.04em}
.solo .brand .t span{color:var(--accent)}
.solo .brand .s{font-size:13px; color:var(--muted); margin-top:2px}
.solo button{width:100%; padding:11px; margin-top:20px; font-size:15px}
.wide{max-width:640px}
footer.f{text-align:center; color:var(--muted); font-size:12px; padding:20px}

/* 横に余裕がないときは、左メニューをやめて横並びのバーに戻す。
   スマホで210px を取られると表が読めなくなるため。 */
@media (max-width:900px){
  body.app{padding-left:0}
  nav.main{
    position:static; width:auto; padding:0 12px;
    overflow-x:auto; overflow-y:hidden;
  }
  nav.main .inner{display:flex; gap:2px}
  nav.main a{
    display:inline-block; padding:11px 15px;
    border-left:none; border-bottom:3px solid transparent;
  }
  nav.main a.on{border-left-color:transparent; border-bottom-color:var(--accent-2)}
}
@media (max-width:640px){
  main{padding:16px 12px 60px}
  .card{padding:16px}
  header.top .who .mail{display:none}
  header.top .area{display:none}
}