/* 顧客対応台：見た目の整理（最後に読み込む）。
   方針：下地は無彩色に近いグレー、主色は青ひとつ、赤は「急ぎ・超過」だけ。ラベルの色分け・太い色線・大きな枠付きボタンをやめる */
:root{--bg:#F4F6F9;--card:#fff;--line:#E1E6EE;--line2:#E8ECF2;--line3:#EFF2F7;--field:#CFD7E3;--r:10px;--shadow:none;--soft:#566277;--faint:#8792A3;--ink:#17233A;--tint:#EAF1FA;
  --bd:#D7DEE8;--red:#C42B1C;--redbg:#FDECEA}
body{font-size:14.5px;background:var(--bg)}
.view{max-width:1180px}

/* 見出し */
.pagehead{margin-bottom:18px;gap:12px}
.pagehead h1,h1{font-size:22px;font-weight:700;letter-spacing:.01em}
.pagehead h1::after{display:none}
.pagehead p{margin:3px 0 0;font-size:13px;color:var(--soft)}

/* 面 */
.card{border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 2px rgba(16,35,58,.04);padding:16px 20px}
.card.flush{padding:0}.card h2{font-size:16px}
.cardhead,.td-head{border-bottom:0}

/* ボタン：主は塗り、副は細い灰色の枠 */
.btn{height:38px;padding:0 18px;font-size:14px;border-radius:8px;font-weight:600;border-width:1px}
.btn.ghost{background:#fff;color:#1F2D45;border:1px solid var(--bd);font-weight:600}
.btn.ghost:hover{border-color:var(--blue);color:var(--blue);background:#fff}
.btn.sm{height:32px;padding:0 12px;font-size:13px;border-radius:7px}
.btn.danger{background:#fff;color:var(--red);border-color:#F0C4BF}.btn.danger:hover{background:var(--redbg)}
.seg .segb{border-color:var(--bd);font-size:13px;padding:5px 14px}.seg .segb.on{background:var(--blue);border-color:var(--blue)}

/* サイドバー */
.side{border-right:1px solid var(--line)}
.side nav a{color:#2B3850;border-radius:8px;font-size:14px}.side nav a:hover{background:#F2F5F9}
.side nav a.on{background:var(--tint);color:var(--blue-d);font-weight:700;box-shadow:inset 3px 0 0 var(--blue)}
.side nav a svg{opacity:.7}.side nav a.on svg{opacity:1}

/* 検索・入力 */
input:not([type=checkbox]):not([type=radio]),select,textarea{border-color:var(--bd);border-radius:8px}
.field label{font-size:12.5px;font-weight:600;color:var(--soft)}

/* 表 */
.tbl th{background:#F7F9FC;color:var(--soft);font-size:12px;font-weight:600;border-bottom:1px solid var(--line)}
.tbl td{border-bottom:1px solid var(--line3)}.tbl tbody tr:hover td{background:#F8FAFD}
.chip2{font-weight:600}.chip2.gray{background:#EEF1F6;color:#4A566B}

/* 指標タイル：数字は墨色、選んだときだけ青 */
.kpis{gap:10px}
.kpi{border:1px solid var(--line);border-radius:10px;box-shadow:none;padding:12px 14px}.kpi:hover{transform:none;box-shadow:none;border-color:#B9C6D8}
.kpi b{color:var(--ink);font-size:20px}.kpi.on{background:var(--tint);border-color:var(--blue)}.kpi.on b{color:var(--blue-d)}

/* 今日（ホーム） */
.td-quick{margin:2px 0 14px}
.pillbtn{height:30px;padding:0 13px;border-color:var(--bd);color:#2B3850;font-weight:600;font-size:12.5px}.pillbtn:hover{border-color:var(--blue);color:var(--blue);background:#fff}
.td-bar{margin-bottom:12px}
.td-tiles{grid-auto-columns:minmax(112px,1fr);gap:8px}
.td-tile{border-radius:10px;border-color:var(--line);min-height:68px;padding:10px 14px;box-shadow:none}
.td-tile:hover{border-color:#B9C6D8}.td-tile .tl{font-size:12px;color:var(--soft)}
.td-tile .tn{font-size:22px;color:var(--ink)}.td-tile .ts{font-size:11.5px;color:var(--faint)}.td-tile.hot .ts{color:var(--red);font-weight:600}
.td-tile.on{background:var(--tint);border-color:var(--blue)}.td-tile.on .tl{color:var(--blue-d)}.td-tile.on .tn{color:var(--blue-d)}.td-tile.on .ts{color:var(--soft)}
/* 見出しの色線をやめ、小さな点で示す */
.td-sec{margin-bottom:12px}.td-sec.hot,.td-sec.mid,.td-sec.low{border-top:1px solid var(--line)}
.td-sec .td-head{padding:14px 20px 10px}.td-sec .td-head h2{font-size:15px}
.td-sec .td-head h2::before{content:"";width:8px;height:8px;border-radius:50%;background:#B8C2D1;align-self:center;margin-right:2px}
.td-sec.hot .td-head h2::before{background:#E5484D}.td-sec.mid .td-head h2::before{background:var(--blue)}
.td-n{font-weight:600;color:var(--faint);font-size:12.5px}
.td-r{grid-template-columns:88px minmax(0,1fr) 100px 92px minmax(84px,auto);padding:11px 20px;border-top:1px solid var(--line3)}
.td-r:hover{background:#F8FAFD}
.td-r:before{display:none}.td-r.hot:before,.td-r.warn:before{display:none}
.td-gh{background:#FBFCFE}
.td-r .td-m b{font-weight:600;font-size:14px}.td-m small{color:var(--soft)}
.td-w{color:var(--soft)}.td-r.hot .td-w{color:var(--red);font-weight:700}
.td-amt{color:var(--ink)}
/* 種類のラベルは同じ色。色分けは「急ぎ」にだけ使う */
.td-kb,.td-kb[class*="k-"]{background:#EEF2F8;color:#3A4963;font-weight:600;border-radius:6px;padding:3px 0}
.td-r.hot .td-kb{background:var(--redbg);color:var(--red)}
.td-a{height:30px;padding:0 12px}
.td-more{background:#FBFCFE;font-size:13px}
.td-nums b{color:var(--ink)}.td-nums b.bad{color:var(--red)}

.td-kb{white-space:nowrap;font-size:11px;padding:4px 2px}.td-w{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn.dim{opacity:.45}