/* ==========================================================================
   KIZUNA CRM  SFA/営業系 業務コンソール共通UI  ui-sfa.css
   --------------------------------------------------------------------------
   対象画面: sales_sfa.html / sales.html / indeed_campaign.html /
             gross_profit.html / dashboard.html / assign-manager.html など

   デザイン方針:
   - 濃紺フラット + 罫線区切りの業務コンソール調
   - Meiryo フォント / 角丸なし / 影控えめ / グラデ最小
   - アクセントは #1f6feb (青)

   注意:
   - ソフト系の ui.css とは変数空間が重なるため、同時読み込みしない
   - ソフト系画面（telema.html / home.html など）では ui.css を使う
   ========================================================================== */

/* --- デザイントークン ---------------------------------------------------- */
:root {
  --bg:#dfe3e8;
  --nav:#1c2836;
  --nav-2:#26374a;
  --surface:#ffffff;
  --surface-2:#eef1f4;
  --line:#c2c9d2;
  --line-2:#aab3bf;

  --ink:#182029;
  --ink-2:#3a4453;
  --ink-3:#5f6b7a;

  --steel:#5a6b7d;
  --accent:#1f6feb;

  --danger:#c62828;  --danger-bg:#f6dcda;
  --warn:#b26a00;    --warn-bg:#f5e6cc;
  --ok:#1f7a4d;      --ok-bg:#d9ecdf;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  font-family:'Meiryo','メイリオ',sans-serif;
  font-size:14px;
  line-height:1.5;
  color:var(--ink);
  background:
    linear-gradient(0deg,rgba(0,0,0,.02),rgba(0,0,0,.02)),
    repeating-linear-gradient(135deg,#e2e6eb 0 2px,#dde1e7 2px 4px);
}
.wrap{ max-width:1360px; margin:0 auto; padding:0 16px 60px; }

/* --- 上部ヘッダー -------------------------------------------------------- */
header.top{
  display:flex; align-items:center; gap:14px;
  height:52px; padding:0 18px;
  background:linear-gradient(180deg,var(--nav-2),var(--nav));
  color:#dfe6ee;
  margin:0 -16px 20px;
  border-bottom:3px solid var(--accent);
}
.logo{ font-weight:700; font-size:17px; }
.logo b{ color:#fff; }
.logo span{ color:#7fb0f5; }
.logo small{
  font-size:11px; color:#8fa2b6;
  letter-spacing:.18em; margin-left:8px; font-weight:400;
}
.sp{ flex:1; }
.who{
  display:flex; align-items:center; gap:9px;
  font-size:13px; color:#aab8c6;
}
.who b{ color:#fff; font-weight:600; }
.who .r{
  font-size:10px; background:var(--accent); color:#fff;
  padding:2px 8px; letter-spacing:.1em;
}
.lo{
  background:none; border:1px solid #45596e; color:#aab8c6;
  font-size:12px; padding:5px 11px; cursor:pointer;
  font-family:inherit;
}
.lo:hover{ background:#31465c; }

/* --- ツールバー（画面上部のアプリ移動） ---------------------------------- */
.toolbar{
  display:flex; margin-bottom:20px; flex-wrap:wrap;
  border:1px solid var(--line-2); background:var(--surface);
}
.tb{
  font-size:13px; font-weight:600; color:var(--ink-2);
  background:var(--surface); border:none;
  border-right:1px solid var(--line);
  padding:9px 15px; cursor:pointer; font-family:inherit;
}
.tb:hover{ background:var(--surface-2); }
.toolbar .gap{ flex:1; border-right:1px solid var(--line); }
.tb.r{ border-right:none; color:var(--ink-3); }

.viewas{
  display:flex; align-items:center; gap:6px;
  padding:0 12px; border-right:1px solid var(--line);
  font-size:12px; color:var(--ink-3);
}
.viewas select{
  font-size:12px; border:1px solid var(--line-2);
  padding:4px 8px; background:#fff; color:var(--ink);
  font-family:inherit;
}

/* --- セクション --------------------------------------------------------- */
.sec{ margin-bottom:20px; }
.sec-h{
  display:flex; align-items:center; gap:10px;
  background:var(--steel); color:#fff;
  padding:7px 14px; border-left:4px solid var(--accent);
}
.sec-h .idx{
  font-size:11px; font-weight:700;
  background:rgba(255,255,255,.16); padding:1px 8px;
  letter-spacing:.06em;
}
.sec-h h2{ font-size:15px; font-weight:700; }
.sec-h .sub{ font-size:12px; color:#dbe4ec; font-weight:400; }
.sec-h .right{ margin-left:auto; font-size:12px; color:#dbe4ec; }
.sec-body{
  background:var(--surface);
  border:1px solid var(--line-2); border-top:none;
  padding:14px;
}

/* --- KPIカード群 --------------------------------------------------------- */
.kpis{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line-2); border:1px solid var(--line-2);
}
.kpi{ background:var(--surface); padding:13px 15px; cursor:pointer; }
.kpi:hover{ background:var(--surface-2); }
.kpi .n{
  font-size:28px; font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.kpi .l{ font-size:13px; color:var(--ink); margin-top:5px; }
.kpi .s{ font-size:11px; color:var(--ink-3); margin-top:2px; }

.kpi.d { border-top:3px solid var(--danger); } .kpi.d  .n{ color:var(--danger); }
.kpi.w { border-top:3px solid var(--warn);   } .kpi.w  .n{ color:var(--warn); }
.kpi.o { border-top:3px solid var(--ok);     } .kpi.o  .n{ color:var(--ok); }
.kpi.n0{ border-top:3px solid var(--steel);  }
.kpi.sg{ border-top:3px solid var(--ok);     } .kpi.sg .n{ color:var(--ok); }
.kpi.sl{ border-top:3px solid var(--warn);   } .kpi.sl .n{ color:var(--warn); }
.kpi.sn{ border-top:3px solid var(--ink-3);  }
.kpi.sh{ border-top:3px solid #c62828;       } .kpi.sh .n{ color:#c62828; }
.kpi.hd{ border-top:3px solid #1f6feb;       } .kpi.hd .n{ color:#1f6feb; }

/* --- カラム3分割（超過/今日/今週） -------------------------------------- */
.cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.col{ border:1px solid var(--line); background:var(--surface); }
.col-h{
  padding:7px 12px; font-size:13px; font-weight:700;
  display:flex; align-items:center; color:#fff;
}
.col-h .c{ margin-left:auto; font-variant-numeric:tabular-nums; }
.col.over  .col-h{ background:var(--danger); }
.col.today .col-h{ background:var(--warn); }
.col.week  .col-h{ background:var(--steel); }
.col-body{ padding:8px; max-height:260px; overflow-y:auto; }

.row{
  padding:8px 9px;
  border:1px solid var(--line);
  border-left:3px solid var(--line-2);
  margin-bottom:6px; cursor:pointer;
}
.row:last-child{ margin-bottom:0; }
.row:hover{ background:var(--surface-2); border-left-color:var(--accent); }
.row .co{ font-weight:700; font-size:14px; }
.row .meta{
  font-size:12px; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.row .act{
  font-size:12px; color:var(--ink-2);
  margin-top:3px; padding-top:3px;
  border-top:1px dotted var(--line);
}
.row .ov{ color:var(--danger); font-weight:700; }
.empty{
  font-size:12px; color:var(--ink-3);
  text-align:center; padding:16px; line-height:1.7;
}

/* --- 先回りアラート ------------------------------------------------------ */
.alerts{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.al{ border:1px solid var(--line); background:var(--surface); opacity:.5; }
.al .h{
  display:flex; align-items:center; gap:7px;
  padding:8px 11px; background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.al .h .t{ font-size:13px; font-weight:700; }
.al .h .n{
  margin-left:auto; font-size:10px; font-weight:700; color:#fff;
  background:var(--steel); padding:1px 8px;
}
.al .b{ padding:11px; font-size:12px; color:var(--ink-2); line-height:1.7; }

/* --- フィルタ帯 ---------------------------------------------------------- */
.filters{
  display:flex; gap:8px; padding:11px 12px;
  background:var(--surface-2); border:1px solid var(--line);
  border-bottom:none; flex-wrap:wrap; align-items:center;
}
.filters select,
.filters input{
  font-size:13px; border:1px solid var(--line-2);
  padding:6px 10px; background:#fff; color:var(--ink);
  font-family:inherit;
}
.filters input{ flex:1; min-width:200px; }
.filters .cnt{
  margin-left:auto; font-size:12px;
  color:var(--ink-2); font-variant-numeric:tabular-nums;
}

/* --- テーブル ------------------------------------------------------------ */
.tblwrap{ max-height:640px; overflow:auto; border:1px solid var(--line); }
table{ width:100%; border-collapse:collapse; font-size:13px; }
th{
  text-align:left; padding:8px 12px;
  font-size:11px; font-weight:700; letter-spacing:.04em;
  color:#fff; background:var(--steel);
  position:sticky; top:0; z-index:5; white-space:nowrap;
}
td{
  padding:9px 12px; border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums; vertical-align:top;
}
tr.hj:hover td{ background:var(--surface-2); }

.cn{
  font-weight:700; color:var(--ink);
  font-variant-numeric:normal; cursor:pointer; display:inline-block;
}
.cn:hover{ color:var(--accent); text-decoration:underline; }
.cs{ font-size:12px; color:var(--ink-3); font-variant-numeric:normal; }

/* --- バッジ・タグ -------------------------------------------------------- */
.wbadge{
  font-size:11px; font-weight:700;
  padding:1px 7px; margin-left:6px; white-space:nowrap;
  background:var(--surface-2); color:var(--ink-2);
  border:1px solid var(--line-2);
}
.st{
  font-size:11px; font-weight:700; padding:2px 8px;
  white-space:nowrap; display:inline-block;
}
.st.hot { background:var(--ok-bg);     color:var(--ok); }
.st.warm{ background:var(--warn-bg);   color:var(--warn); }
.st.cold{ background:var(--danger-bg); color:var(--danger); }
.st.none{ background:var(--surface-2); color:var(--ink-2); }

.risk{
  font-size:11px; font-weight:700; padding:2px 7px;
  background:var(--danger); color:#fff; margin-left:6px;
}

/* セグメントバッジ */
.seg{
  font-size:11px; font-weight:700; padding:2px 8px;
  white-space:nowrap; display:inline-block; margin-left:6px;
}
.seg.now { background:var(--ok-bg);      color:var(--ok); }
.seg.lost{ background:var(--warn-bg);    color:var(--warn); }
.seg.new { background:var(--surface-2);  color:var(--ink-2);
           border:1px solid var(--line-2); }
.seg.hot { background:#c62828;           color:#fff; }
.seg.hd  { background:#1f6feb;           color:#fff; }
.seg.must{ background:#7b1fa2;           color:#fff; }
.seg.done{ background:var(--surface-2);  color:var(--ink-3);
           border:1px solid var(--line-2); }

.hdchk{
  cursor:pointer; font-size:12px;
  color:var(--ink-2); user-select:none;
}
.hdchk:hover{ color:var(--accent); }

/* --- 展開トグル・窓口行 -------------------------------------------------- */
.exp{
  cursor:pointer; color:var(--accent);
  font-weight:700; font-size:13px; user-select:none;
}
tr.win td{
  background:#f7f9fb;
  border-bottom:1px dotted var(--line);
}
tr.win td.pad{ padding-left:26px; }
.wlink{
  font-size:13px; color:var(--accent);
  cursor:pointer; text-decoration:underline;
}

/* --- 状態表示 ------------------------------------------------------------ */
.loading{
  padding:40px; text-align:center;
  color:var(--ink-3); font-size:12px;
}

/* --- ログイン画面 -------------------------------------------------------- */
#login-screen{
  position:fixed; inset:0;
  background:#111820;
  display:flex; align-items:center; justify-content:center;
  z-index:1000;
}
#login-screen .box{
  width:360px; padding:30px 32px;
  background:#1e2a3a; border:1px solid #2e4060;
}
#login-screen h1{
  font-size:16px; color:#fff; letter-spacing:.06em;
  margin-bottom:20px; padding-left:10px;
  border-left:4px solid var(--accent);
}
#login-screen label{
  display:block; font-size:12px; color:#8eacc4; margin-bottom:5px;
}
#login-screen input{
  width:100%; padding:10px 12px;
  background:#162030; border:1px solid #2e4060;
  color:#e0ecf8; font-size:14px; font-family:inherit;
  margin-bottom:14px;
}
#login-screen button{
  width:100%; padding:12px;
  background:var(--accent); color:#fff; border:none;
  font-size:14px; font-weight:700; font-family:inherit;
  cursor:pointer;
}
#login-error{
  color:#ff8080; font-size:12px; margin-top:10px;
  text-align:center; min-height:16px;
}

/* --- レスポンシブ ------------------------------------------------------- */
@media(max-width:900px){
  .kpis, .alerts{ grid-template-columns:1fr 1fr; }
  .cols{ grid-template-columns:1fr; }
}

/* --- 動きを減らす設定を尊重 ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   ▼▼▼ sales.html 用の追加スタイル ▼▼▼
   sales_sfa.html にない部品（タブ／3パネル／フォーム／モーダル／
   タイムライン／法人拡張バー）を追加。既存の SFA スタイルを再利用しつつ、
   足りない部品だけを補う設計。
   ========================================================================== */

/* --- 追加のデザイントークン ---------------------------------------------- */
:root {
  --passup:#6d28d9;   /* パスアップ紫 */
  --self:#c2410c;     /* 自己登録オレンジ */
  --master:#0e7c8f;   /* 顧客マスターティール */
}

/* --- アプリシェル（body 全体を縦フレックスの1画面型にする） -------------- */
body.app-shell{
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
body.app-shell .wrap{ display:none; }

/* --- ヘッダーバリアント（sales.html 用の追加要素） ---------------------- */
/* ロール表示バッジ（.who .r とは別に単独で使えるバッジ） */
header.top .role-badge{
  font-size:10px; background:var(--accent); color:#fff;
  padding:2px 8px; letter-spacing:.1em; font-weight:700;
}

/* --- ページタブ（.tb を再利用してアクティブ状態を追加） ----------------- */
.tb.is-active{
  color:var(--accent); font-weight:700;
  background:var(--surface-2);
  box-shadow:inset 0 -3px 0 var(--accent);
}
.tb.tab-primary{
  color:var(--accent); font-weight:700;
}
.tb.tab-primary:hover{ background:#e8f0fc; }

/* --- ページコンテナ（タブ切替） ----------------------------------------- */
.page{
  display:none;
  flex:1;
  overflow:hidden;
  flex-direction:column;
}
.page.active{ display:flex; }

/* --- 3パネル構成 -------------------------------------------------------- */
.tri-layout{
  display:flex;
  flex:1;
  overflow:hidden;
}

/* サイドバー（顧客リスト） */
.sidebar{
  width:300px; min-width:300px;
  background:var(--surface);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
}
.panel-header{
  padding:11px 12px;
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.panel-header input,
.panel-header select{
  width:100%; padding:6px 9px;
  border:1px solid var(--line-2); background:#fff;
  color:var(--ink); font-size:13px; font-family:inherit;
  margin-bottom:6px; outline:none;
}
.panel-header input:focus,
.panel-header select:focus{ border-color:var(--accent); }
.filter-row{ display:flex; gap:6px; }
.filter-row select{ flex:1; margin-bottom:0; font-size:12px; }
.list-count{
  font-size:12px; color:var(--ink-3); margin-top:6px;
  font-variant-numeric:tabular-nums;
}

/* 顧客カード（サイドバーの一覧アイテム） */
.cust-list{ flex:1; overflow-y:auto; }
.cust-card{
  padding:9px 12px;
  border-bottom:1px solid var(--line);
  border-left:3px solid transparent;
  cursor:pointer; transition:background .12s;
}
.cust-card:hover{ background:var(--surface-2); }
.cust-card.active{
  background:#e8f0fc;
  border-left-color:var(--accent);
}
.cust-card-company{
  font-size:13px; font-weight:700; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cust-card-branch{
  font-size:12px; color:var(--ink-3); margin-top:1px;
}

/* --- コンテンツエリア --------------------------------------------------- */
.content-area{
  flex:1;
  display:flex; flex-direction:column;
  overflow:hidden;
  background:var(--surface-2);
}

/* 情報バー（顧客詳細ヘッダー） */
.info-bar{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  padding:12px 18px;
  flex-shrink:0;
  display:none;
}
.info-bar.visible{ display:block; }
.info-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.info-company{
  font-size:16px; font-weight:700; color:var(--ink);
}
.info-branch{
  font-size:13px; color:var(--ink-3); margin-top:2px;
}
.info-detail-row{
  display:flex; gap:22px; margin-top:8px; flex-wrap:wrap;
}
.info-detail-item label{
  font-size:11px; color:var(--ink-3); display:block;
}
.info-detail-item p{
  font-size:13px; color:var(--ink); font-weight:500;
}

/* 顧客区分バッジ */
.source-badge{
  display:inline-flex; align-items:center;
  padding:3px 10px;
  font-size:11px; font-weight:700; letter-spacing:.05em;
  white-space:nowrap;
}
.badge-master { background:#e0f5f7; color:var(--master); }
.badge-history{ background:#e0f2fe; color:#0369a1; }
.badge-passup { background:#ede9fe; color:var(--passup); }
.badge-self   { background:#ffedd5; color:var(--self); }

/* 顧客編集ボタン */
.btn-edit-cust{
  font-size:12px; padding:4px 10px;
  border:1px solid var(--line-2); background:#fff;
  color:var(--ink-2); font-family:inherit; cursor:pointer;
}
.btn-edit-cust:hover{ background:var(--surface-2); }

/* --- 履歴パネル + フォームパネル ---------------------------------------- */
.content-panels{
  display:none;
  flex:1; overflow:hidden;
}
.content-panels.visible{ display:flex; }
.history-panel{
  flex:6; min-width:0;
  padding:14px 18px; overflow-y:auto;
  border-right:1px solid var(--line);
}
.form-panel{
  flex:4; min-width:360px;
  padding:14px 16px; overflow-y:auto;
  background:var(--surface);
  border-left:1px solid var(--line);
}
.history-title{
  font-size:13px; font-weight:700;
  color:var(--ink-2);
  margin-bottom:11px;
  display:flex; align-items:center; gap:6px;
  padding-bottom:6px;
  border-bottom:2px solid var(--line);
}

/* --- 履歴エントリ ------------------------------------------------------- */
.history-entry{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  padding:11px 14px;
  margin-bottom:8px;
}
.history-meta{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px; margin-bottom:6px;
}
.history-date{
  font-size:13px; color:var(--ink-2); font-weight:700;
  font-variant-numeric:tabular-nums;
}
.h-badges{
  display:flex; gap:4px; align-items:center; flex-wrap:wrap;
}
.h-badge{
  font-size:11px; padding:2px 7px; font-weight:600;
  white-space:nowrap;
}
.hb-method  { background:#e0f2fe; color:#0369a1; }
.hb-ok      { background:var(--ok-bg); color:var(--ok); }
.hb-ng      { background:var(--surface-2); color:var(--ink-3); }
.hb-progress{ background:#fef3c7; color:#854d0e; }
.hb-rakuraku{ background:#e0f2fe; color:var(--master); font-size:10px; }
.hb-window  { background:var(--surface-2); color:var(--ink-2); font-weight:600; }
.hb-act2    { background:#dff0f0; color:#0e6b6b; }
.hb-plan    { background:#efe0ff; color:#6b21a8; }
.hb-need    { background:#fff2e6; color:#c2410c; }
.hb-money   { background:#e8f5e9; color:#1b5e20; }

.h-actions{ display:flex; gap:4px; }
.btn-sm{
  padding:3px 8px; font-size:11px;
  border:1px solid var(--line-2); background:#fff;
  color:var(--ink-3); font-family:inherit; cursor:pointer;
}
.btn-sm:hover{ background:var(--surface-2); }
.btn-sm-d{ border-color:#e0a0a0; color:var(--danger); }
.btn-sm-d:hover{ background:var(--danger); color:#fff; }

.history-content{
  font-size:13px; color:var(--ink); line-height:1.7;
  white-space:pre-wrap; word-break:break-word;
}
.history-footer{
  display:flex; justify-content:space-between; margin-top:6px;
  flex-wrap:wrap; gap:6px;
}
.history-caller{
  font-size:12px; color:var(--ink-3);
}
.history-next{
  font-size:12px; color:var(--warn); font-weight:700;
}

/* --- 記録フォーム ------------------------------------------------------- */
.form-section-title{
  font-size:11px; font-weight:700;
  color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:8px;
}
.form-group{ margin-bottom:11px; }
.form-label{
  font-size:12px; color:var(--ink-2); font-weight:600;
  margin-bottom:4px; display:block;
}
.req{
  color:var(--danger); margin-left:2px; font-size:10px;
}
.form-input,
.form-select,
.form-textarea{
  width:100%; padding:7px 9px;
  border:1px solid var(--line-2); background:#fff;
  color:var(--ink); font-size:13px; font-family:inherit;
  outline:none; transition:border-color .15s;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus{ border-color:var(--accent); }
.form-textarea{ resize:vertical; min-height:120px; line-height:1.6; }
.form-row2{ display:flex; gap:8px; }
.form-row2 .form-group{ flex:1; min-width:0; }

/* 保存・キャンセルボタン */
.btn-save{
  width:100%; padding:10px;
  background:var(--accent); color:#fff;
  border:none; font-family:inherit;
  font-size:14px; font-weight:700;
  cursor:pointer; margin-top:4px;
}
.btn-save:hover{ background:#1a5fcf; }
.btn-save:disabled{ opacity:.6; cursor:default; }
.btn-cancel{
  width:100%; padding:8px;
  background:#fff; color:var(--ink-3);
  border:1px solid var(--line-2);
  font-size:13px; font-family:inherit;
  cursor:pointer; margin-top:6px;
}
.btn-cancel:hover{ background:var(--surface-2); }

/* --- チェックボックスグリッド ------------------------------------------ */
.chk-grid{ display:flex; flex-wrap:wrap; gap:6px; }
.chk-item{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 9px;
  border:1px solid var(--line-2); background:#fff;
  font-size:12px; line-height:1.3;
  cursor:pointer; user-select:none;
}
.chk-item:hover{ border-color:var(--accent); }
.chk-item input{ margin:0; cursor:pointer; }
.chk-item.on{
  background:#e8f0fc; border-color:var(--accent);
  color:var(--accent); font-weight:700;
}
.chk-item.eff{
  background:#eef4ff; border-color:var(--accent); color:var(--accent);
}
.chk-item.eff.on{
  background:var(--accent); border-color:var(--accent); color:#fff;
}
.chk-loading{ font-size:12px; color:var(--ink-3); }

/* --- タイムラインフィルタ ---------------------------------------------- */
.tl-filters{ display:flex; gap:6px; margin-bottom:11px; flex-wrap:wrap; }
.tl-filters select{
  padding:5px 8px;
  border:1px solid var(--line-2); background:#fff;
  color:var(--ink); font-size:12px; font-family:inherit;
  cursor:pointer; outline:none;
}

/* 窓口プルダウン（フォーム内の目立たせ用） */
.win-select{
  width:100%; padding:8px 10px;
  border:1px solid var(--accent); background:#f0f6ff;
  color:var(--ink); font-size:13px; font-family:inherit;
  font-weight:600; outline:none;
}

/* パスアップ専用の枠 */
.passup-only{
  border-left:3px solid var(--passup);
  padding-left:11px; margin-bottom:12px;
}
.progress-warn{
  margin-top:4px; font-size:11px;
  color:var(--danger); font-weight:700;
}

/* 履歴なし空状態 */
.hist-empty{
  border:2px dashed var(--line-2); background:var(--surface);
  padding:36px 22px; text-align:center; margin-top:8px;
}
.hist-empty .ico{
  font-size:34px; opacity:.35; display:block; margin-bottom:10px;
}
.hist-empty .t{
  font-size:14px; font-weight:700; color:var(--ink); margin-bottom:8px;
}
.hist-empty .s{
  font-size:12px; line-height:1.9; color:var(--ink-3);
}
.hist-empty .arrow{
  margin-top:12px; font-size:12px;
  color:var(--accent); font-weight:700;
}

/* --- 空状態（顧客未選択時） -------------------------------------------- */
.empty-state{
  flex:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:10px; color:var(--ink-3);
}
.empty-icon{ font-size:38px; opacity:.3; }

/* --- モーダル ----------------------------------------------------------- */
.modal-overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(15,25,40,.55);
  z-index:200;
  align-items:center; justify-content:center;
}
.modal-overlay.open{ display:flex; }
.modal-box{
  background:#fff;
  padding:22px 22px 18px;
  width:480px; max-width:95vw; max-height:90vh;
  overflow-y:auto;
  border-top:3px solid var(--accent);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.modal-title{
  font-size:15px; font-weight:700;
  color:var(--ink);
  margin-bottom:16px;
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
}
.modal-close{
  background:none; border:none;
  font-size:20px; cursor:pointer; color:var(--ink-3);
  padding:0 4px;
}
.modal-close:hover{ color:var(--ink); }

/* --- 法人拡張情報バー -------------------------------------------------- */
#hojin-ext-bar{ display:none; margin-top:10px; }
#hojin-ext-bar.visible{ display:block; }
.hj-badges{
  display:flex; gap:6px; flex-wrap:wrap;
  align-items:center; margin-bottom:8px;
}
.hj-badge{
  font-size:11px; font-weight:700;
  padding:3px 10px; white-space:nowrap;
}
.hj-seg-genS  { background:var(--ok-bg);   color:var(--ok); }
.hj-seg-shinki{ background:var(--surface-2); color:var(--ink-2); }
.hj-seg-ochiS { background:var(--warn-bg); color:var(--warn); }
.hj-hot   { background:#ffe1e1; color:var(--danger); }
.hj-hand  { background:#ede9fe; color:var(--passup); }
.hj-visit { background:#fef3c7; color:#92400e; }
.hj-act   { background:#e0f2fe; color:#0369a1; }
.hj-code{
  font-size:11px; color:var(--ink-3); font-weight:700;
  letter-spacing:.05em;
}

.hj-stats{
  display:flex; gap:0; flex-wrap:wrap;
  background:var(--surface-2);
  border:1px solid var(--line);
  overflow:hidden;
}
.hj-stat{
  flex:1; min-width:110px;
  padding:7px 12px;
  border-right:1px solid var(--line);
}
.hj-stat:last-child{ border-right:none; }
.hj-stat label{
  display:block; font-size:11px;
  color:var(--ink-3); margin-bottom:2px;
}
.hj-stat b{
  font-size:14px; color:var(--ink); font-weight:700;
  font-variant-numeric:tabular-nums;
}
.hj-stat b.warn{ color:var(--danger); }
.hj-stat b.ok  { color:var(--ok); }

.hj-hot-toggle{
  font-size:11px; padding:3px 10px;
  border:1px dashed var(--line-2); background:#fff;
  color:var(--ink-3); font-family:inherit; font-weight:600;
  cursor:pointer;
}
.hj-hot-toggle:hover{ border-color:var(--danger); color:var(--danger); }

/* --- フローティングTOPボタン ------------------------------------------ */
#scroll-top-btn{
  position:fixed; bottom:20px; right:20px;
  width:40px; height:40px;
  background:var(--nav); color:#fff;
  border:1px solid var(--line-2);
  font-size:18px; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  z-index:9999;
  display:none;
  align-items:center; justify-content:center;
}
#scroll-top-btn:hover{ background:var(--nav-2); }

/* --- パスアップ案件のステータス（サイドバー内小バッジ） --------------- */
.passup-status{
  font-size:11px; padding:2px 8px; font-weight:700;
  white-space:nowrap;
}