/* CRM の画面だけのレイアウト（表の列・2段表示・余白・折り返し）
   色・影・角丸の新しい値は足さない。区切りは 1px の罫線だけ。塗った札・帯・箱は作らない。
   状態は線アイコン＋文字（.st）。クラスは crm- で始める。共通の部品に足すものは body[data-tool="crm"] で CRM の画面だけに効かせる */

/* ───── 共通 ───── */
.crm-title { overflow-wrap: anywhere; }
.crm-head-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 18px; min-width: 0; max-width: 100%; }
.crm-lead-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; overflow-wrap: anywhere; }
.crm-lead-line .st { white-space: normal; }
.crm-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.crm-line .st { white-space: normal; }
.crm-more { display: flex; justify-content: flex-end; margin-top: 14px; }
.crm-count { margin: 0 0 10px; }
.crm-n { text-align: right; white-space: nowrap; }
.tbl-head .crm-n { white-space: normal; }
.crm-warn:empty { display: none; }
.crm-warn { margin-bottom: 8px; }
.crm-hint { margin: -8px 0 14px; }
.crm-kv { margin: 0; }
.crm-kv .st { white-space: normal; }
.crm-kv .hint { margin-top: 2px; }
body[data-tool="crm"] .card > .seg-tabs, body[data-tool="crm"] .card > .crm-tabs { margin: -6px 0 0; }
body[data-tool="crm"] .card > .seg-tabs + .crm-form { margin-top: 22px; }
body[data-tool="crm"] .page-head + .note { margin-bottom: 24px; }

/* 絞り込み（入力欄は下線だけ。囲まない） */
body[data-tool="crm"] .crm-filters { justify-content: flex-start; align-items: flex-end; gap: 6px 22px; }
/* タブの無いカード（取引先・割り当て）は、SEO の絞り込みと同じく上の余白を付けない */
body[data-tool="crm"] .card > .crm-filters:first-child { margin-top: 0; }
.crm-filters .search { flex: 1 1 260px; max-width: 360px; margin: 0; }
.crm-filters select.input { width: auto; min-width: 150px; max-width: 100%; margin: 0; }
.crm-ck { padding: 8px 0 6px; }

/* ───── 表（行は CSS グリッド。行全体が <a>。地を塗るのはホバーだけ） ───── */
.crm-list .st { white-space: normal; }
.crm-opp-head, .crm-opp-row, .crm-lead-head, .crm-lead-row, .crm-acc-head, .crm-acc-row, .crm-as-head, .crm-as-row {
  display: grid; gap: 14px; align-items: start;
}
.crm-opp-head, .crm-lead-head, .crm-acc-head, .crm-as-head { padding: 0 8px 8px; border-bottom: 1px solid var(--c-line); }
.crm-opp-row, .crm-lead-row, .crm-acc-row, .crm-as-row { padding: 12px 8px; border-bottom: 1px solid var(--c-line-soft); color: var(--c-text); }
.crm-opp-row:hover, .crm-lead-row:hover, .crm-acc-row:hover, .crm-as-row:hover { background: var(--c-hover); color: var(--c-text); }
.crm-opp-row:hover .crm-name, .crm-lead-row:hover .crm-name, .crm-acc-row:hover .crm-name { color: var(--c-brand); }
.crm-as-row { cursor: pointer; }
.crm-c-name { display: flex; flex-direction: column; min-width: 0; }
.crm-name { font-weight: 700; overflow-wrap: anywhere; }
.crm-sub { overflow-wrap: anywhere; }
.crm-c-svc, .crm-c-rating, .crm-c-rep { min-width: 0; overflow-wrap: anywhere; color: var(--c-text-sub); padding-top: 2px; }
.crm-c-date { white-space: nowrap; padding-top: 2px; }
.crm-c-state { min-width: 0; }
.crm-c-state .st { font-size: 12.5px; }
.crm-opp-row .crm-n, .crm-acc-row .crm-n { padding-top: 1px; }
.crm-line2 { display: none; }
.crm-c-check { display: flex; align-items: center; justify-content: center; min-height: 24px; cursor: pointer; }
.crm-c-check input { width: 16px; height: 16px; margin: 0; }
.crm-all-text { display: none; }
/* 見出しの行は .tbl-head の色と高さのまま（上の列の色・余白を見出しに効かせない） */
.crm-list .tbl-head > * { color: inherit; padding-top: 0; }

/* 列の幅（1440px） */
.crm-opp-head, .crm-opp-row { grid-template-columns: 92px minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.3fr) 100px 100px 100px; }
.crm-opp-head.is-admin, .crm-opp-row.is-admin { grid-template-columns: 92px minmax(0, 2fr) minmax(0, 0.9fr) minmax(0, 1.2fr) 100px 100px 100px minmax(0, 0.9fr); }
.crm-lead-head, .crm-lead-row { grid-template-columns: 92px minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
.crm-lead-head.is-admin, .crm-lead-row.is-admin { grid-template-columns: 92px minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.crm-acc-head, .crm-acc-row { grid-template-columns: minmax(0, 2.4fr) 64px 64px 64px 120px 112px; }
.crm-as-head, .crm-as-row { grid-template-columns: 28px 92px minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.crm-as-row { align-items: start; }

/* ───── ホーム・取引先の数字 ───── */
.crm-stats .is-main .big { color: var(--c-brand); }
.crm-stats .is-main .num-label { color: var(--c-text); }
.crm-stats .big { font-size: 30px; }
.crm-stats .num-value, .crm-counts .num-value { min-width: 0; overflow-wrap: anywhere; }
.crm-admin-nums { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--c-line-soft); grid-template-columns: 13em minmax(0, 1fr); }

/* ───── 入力 ───── */
.crm-memo { min-height: 120px; }
.crm-form .form-grid .input[type="date"] { max-width: 220px; }
/* 表の最後の行の下線と2本並ばないよう、上の罫線は付けない */
.crm-assign-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 22px; margin-top: 18px; }
.crm-assign-bar select.input { width: auto; min-width: 180px; max-width: 100%; margin: 0; }
.crm-sel-count { margin-right: auto; }

/* ───── 幅ごとの組み替え ───── */
@media (max-width: 1180px) {
  .crm-c-svc, .crm-c-gp, .crm-c-last { display: none; }
  .crm-opp-head, .crm-opp-row { grid-template-columns: 92px minmax(0, 2.2fr) minmax(0, 1.3fr) 100px 100px; }
  .crm-opp-head.is-admin, .crm-opp-row.is-admin { grid-template-columns: 92px minmax(0, 2fr) minmax(0, 1.2fr) 100px 100px minmax(0, 0.9fr); }
  .crm-lead-head, .crm-lead-row { grid-template-columns: 92px minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr); }
  .crm-lead-head.is-admin, .crm-lead-row.is-admin { grid-template-columns: 92px minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .crm-acc-head, .crm-acc-row { grid-template-columns: minmax(0, 2.4fr) 64px 64px 64px 120px; }
  .crm-as-head, .crm-as-row { grid-template-columns: 28px 92px minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr); }
  .crm-stats .big { font-size: 26px; }
}
@media (max-width: 760px) {
  body[data-tool="crm"] .page-head > .crm-head-right { flex: 1 1 100%; justify-content: flex-start; }
  .crm-admin-nums { grid-template-columns: minmax(0, 1fr); }
  .crm-filters .search, .crm-filters select.input { flex: 1 1 100%; max-width: none; }
  .crm-stats .big { font-size: 22px; }
  .crm-counts .big { font-size: 22px; }
  .crm-form .form-grid .input[type="date"] { max-width: none; }
  .crm-assign-bar { justify-content: flex-start; }
  .crm-assign-bar select.input { flex: 1 1 100%; }
  .crm-assign-bar .btn { width: 100%; }
  .crm-sel-count { flex: 1 1 100%; }
  /* 表: 見出しの行を消し、1行を2段にする（上: 主な列と金額、下: 取引先・日付・状態を小さく） */
  .crm-opp-head, .crm-lead-head, .crm-acc-head { display: none; }
  .crm-opp-row, .crm-opp-row.is-admin, .crm-lead-row, .crm-lead-row.is-admin, .crm-acc-row {
    grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0;
  }
  .crm-opp-row > *, .crm-lead-row > *, .crm-acc-row > * { display: none; }
  .crm-opp-row > .crm-c-name, .crm-lead-row > .crm-c-name, .crm-acc-row > .crm-c-name { display: flex; grid-column: 1; grid-row: 1; }
  .crm-opp-row .crm-sub, .crm-lead-row .crm-sub { display: none; }
  .crm-opp-row > .crm-c-amt, .crm-acc-row > .crm-c-amt { display: block; grid-column: 2; grid-row: 1; }
  .crm-lead-row > .crm-c-state { display: block; grid-column: 2; grid-row: 1; justify-self: end; max-width: 11em; }
  .crm-opp-row > .crm-line2, .crm-lead-row > .crm-line2, .crm-acc-row > .crm-line2 {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; grid-column: 1 / -1; grid-row: 2; min-width: 0; overflow-wrap: anywhere;
  }
  .crm-line2 .st { font-size: 12.5px; }
  /* 割り当て: チェック・会社名の2列。見出しの行は「このページをすべて選ぶ」だけ */
  .crm-as-head, .crm-as-row { grid-template-columns: 28px minmax(0, 1fr); gap: 2px 10px; }
  .crm-as-head { padding: 0 0 8px; }
  .crm-as-row { padding: 12px 0; }
  .crm-as-head > :not(.crm-c-check), .crm-as-row > :not(.crm-c-check):not(.crm-c-name):not(.crm-line2) { display: none; }
  .crm-as-head > .crm-c-check { grid-column: 1 / -1; justify-content: flex-start; gap: 10px; }
  .crm-all-text { display: inline; font-size: 12.5px; }
  .crm-as-row > .crm-c-check { grid-column: 1; grid-row: 1; }
  .crm-as-row > .crm-c-name { grid-column: 2; grid-row: 1; }
  .crm-as-row .crm-sub { display: none; }
  .crm-as-row > .crm-line2 { display: block; grid-column: 2; grid-row: 2; min-width: 0; overflow-wrap: anywhere; }
}

/* ───── ダッシュボードと分析（管理者） ─────
   データの印（棒・見本）の色と角は crm.js の PALETTE・MARK に置く（ここには色・影・角丸の値を書かない）。
   文字は墨。罫線は 1px の区切りだけ。塗った札・帯は作らない。ホバーの小窓は共通の .card を使う */
.crm-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.crm-two > .card { margin-top: 0; }
.crm-two + .card, .card + .crm-two { margin-top: 20px; }
select.input.crm-fy { width: auto; min-width: 0; margin: 0; padding-right: 30px; font-size: 13px; }
.crm-lead-line .crm-fy { margin-left: 2px; }
.crm-gap { height: 22px; }
.crm-kpi-grid .num-cell:first-child { padding-left: 0; }
.crm-kpi-grid .big { font-size: 30px; }
.crm-kpi-grid .is-main .big { color: var(--c-brand); }
.crm-kpi-grid .is-main .num-label { color: var(--c-text); }

/* 今期の大きな数字 */
.crm-hero-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crm-hero-grid .num-cell:first-child { padding-left: 0; }
.crm-hero-cell { padding-top: 6px; padding-bottom: 20px; }
.crm-hero-cell .big { font-size: 44px; letter-spacing: -0.03em; }
.crm-hero-cell.is-main .big { color: var(--c-brand); }
.crm-hero-cell.is-main .num-label { color: var(--c-text); }
.crm-diff { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; font-family: var(--f-en); font-size: 13px; font-weight: 700; color: var(--c-text); }
.crm-diff .muted { font-family: var(--f); font-weight: 500; font-size: 12px; }
.crm-diff-ar { color: var(--c-brand); font-size: 13px; }
.crm-month-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1px; border-top: 1px solid var(--c-line-soft); }
.crm-month-grid .num-cell:first-child { padding-left: 0; }
.crm-month-grid .big { font-size: 22px; }

/* 小さな数字の並び（カードの頭） */
.crm-mini-nums { display: flex; flex-wrap: wrap; gap: 8px 36px; margin: -4px 0 18px; }
.crm-mini-nums > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crm-mini-v { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }

/* 指標の切り替え（カードの右上） */
.crm-metric-tabs { border-bottom: 0; gap: 0 20px; }
.crm-metric-tabs .seg-tab { background-color: transparent; border: 0; cursor: pointer; font: inherit; padding-top: 0; }
.crm-an-tabs { margin: -10px 0 22px; }

/* 月次の縦棒 */
.crm-chart { margin: 0; min-width: 0; }
.crm-chart-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin: 0 0 8px; }
.crm-chart-name { font-size: 13px; font-weight: 700; color: var(--c-text-sub); }
.crm-chart-note { font-size: 12.5px; color: var(--c-text-3); }
.crm-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 14px; font-size: 12.5px; color: var(--c-text-sub); }
.crm-lg { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.crm-lg > i { display: inline-block; width: 10px; height: 10px; flex: none; }
.crm-col-box { position: relative; height: 260px; margin-left: 48px; }
.crm-col-grid { position: absolute; inset: 0 0 26px 0; pointer-events: none; }
.crm-gl { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--c-line-soft); }
.crm-gl:last-child { border-top-color: var(--c-line); }
.crm-gl-v { position: absolute; right: calc(100% + 10px); top: -8px; font-size: 11px; font-weight: 600; color: var(--c-mute); white-space: nowrap; }
.crm-col-plot { position: absolute; inset: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: 100%; gap: 0 4px; }
.crm-col { display: flex; flex-direction: column; min-width: 0; outline: none; }
.crm-col.is-link { cursor: pointer; }
.crm-col-stack { position: relative; flex: 1; margin-bottom: 0; }
.crm-col-bars { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(28px, 70%); height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.crm-seg { display: block; width: 100%; min-height: 2px; flex: none; }
.crm-col:hover .crm-col-stack, .crm-col:focus-visible .crm-col-stack { background: var(--c-hover); }
.crm-col-val { position: absolute; left: 0; right: 0; margin-bottom: 6px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--c-text-sub); white-space: nowrap; transform: translateY(0); }
.crm-col-x { height: 26px; padding-top: 7px; text-align: center; font-size: 11.5px; color: var(--c-text-3); white-space: nowrap; }
/* ホバーの小窓（白地・影。文字は墨、見本の四角だけ色） */
.crm-tip.card { position: absolute; z-index: 5; min-width: 180px; max-width: 280px; padding: 10px 14px; font-size: 12.5px; pointer-events: none; }
.crm-tip-h { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 4px; font-weight: 700; }
.crm-tip-r { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; color: var(--c-text-sub); line-height: 1.8; }
.crm-tip-r > i { width: 8px; height: 8px; }

/* 横棒 */
.crm-bars { display: flex; flex-direction: column; min-width: 0; }
.crm-bars > .crm-chart-cap { margin-bottom: 6px; }
.crm-bar { display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr) minmax(0, auto); align-items: center; gap: 4px 14px; padding: 7px 0; color: var(--c-text); }
.crm-bar + .crm-bar { border-top: 1px solid var(--c-line-soft); }
a.crm-bar:hover { color: var(--c-text); }
a.crm-bar:hover .crm-bar-l { color: var(--c-brand); }
.crm-bar-l { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; line-height: 1.5; }
.crm-bar-t { display: block; height: 10px; }
.crm-bar-f { display: block; height: 100%; min-width: 2px; }
.crm-bar-v { display: flex; flex-direction: column; align-items: flex-end; font-size: 13.5px; white-space: nowrap; text-align: right; line-height: 1.35; }
.crm-bar-s { font-family: var(--f); font-size: 11.5px; font-weight: 500; color: var(--c-text-3); }

/* 数字の表 */
.crm-dt { min-width: 0; }
.crm-dt-row { display: grid; gap: 12px; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--c-line-soft); color: var(--c-text); font-size: 13.5px; }
.crm-dt-row.tbl-head { padding-top: 0; border-bottom-color: var(--c-line); font-size: 12px; }
a.crm-dt-row:hover { background: var(--c-hover); color: var(--c-text); }
a.crm-dt-row:hover .crm-dt-name { color: var(--c-brand); }
.crm-dt-name { font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.crm-dt-foot { border-top: 1px solid var(--c-line); border-bottom: 0; font-weight: 700; }

/* 要対応 */
.crm-todo { margin-top: 0; gap: 12px 40px; }
.crm-todo-h { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 6px; padding-bottom: 8px; border-bottom: 1px solid var(--c-line); font-size: 13px; font-weight: 700; color: var(--c-text-sub); }
.crm-todo-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--c-line-soft); color: var(--c-text); }
.crm-todo-row:hover { color: var(--c-text); }
.crm-todo-row:hover .crm-name { color: var(--c-brand); }
.crm-todo-days { display: flex; flex-direction: column; font-size: 18px; line-height: 1.1; }
.crm-todo-days small { font-family: var(--f); font-size: 10.5px; font-weight: 700; color: var(--c-mute); margin-top: 3px; }
.crm-todo-main { display: flex; flex-direction: column; min-width: 0; }
.crm-todo-main .crm-name { overflow-wrap: anywhere; }

/* 管理者の編集（全項目）: 区切りの見出しは小さな文字だけ */
.crm-edit-sec { grid-column: 1 / -1; margin: 18px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--c-mute); }
.crm-edit-sec:first-child { margin-top: 0; }
.crm-danger { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }

@media (max-width: 1180px) {
  .crm-hero-cell .big { font-size: 34px; }
}
@media (max-width: 900px) {
  .crm-two { grid-template-columns: minmax(0, 1fr); }
  .crm-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .crm-hero-grid .num-cell { padding-left: 0; }
  .crm-month-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-month-grid .num-cell:nth-child(2n+1) { padding-left: 0; }
  .crm-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .crm-kpi-grid .num-cell:nth-child(2n+1) { padding-left: 0; }
}
@media (max-width: 760px) {
  .crm-hero-cell .big { font-size: 32px; }
  .crm-col-box { height: 200px; margin-left: 38px; }
  .crm-col-x { font-size: 10px; }
  .crm-col-val { display: none; }
  .crm-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .crm-bar-t { grid-column: 1 / -1; grid-row: 2; }
  .crm-dt { overflow-x: auto; }
  .crm-dt-row { min-width: 560px; }
  .crm-todo-row { grid-template-columns: 52px minmax(0, 1fr); }
  .crm-todo-row > .crm-n { display: none; }
}