/* 顧客対応台：全ページの仕上げ（いちばん最後に読み込む）
   ねらい：どの画面も「見出し → 切り替え → 絞り込み → 本体」の同じ並び・同じ余白・同じ部品（ボタン・タブ・表・入力・空の表示）にそろえる */
:root{--ease-o:cubic-bezier(.22,1,.36,1);--rc:12px;--rk:8px;--h-ctl:40px;--h-sm:32px;--ring:0 0 0 3px rgba(42,104,188,.16);--sh1:0 1px 2px rgba(16,35,58,.05);--sh2:0 8px 24px -12px rgba(16,35,58,.22)}
html{scroll-padding-top:84px}
::selection{background:rgba(42,104,188,.16)}
body{line-height:1.65;-webkit-font-smoothing:antialiased}
.num,.tbl td.r,.tbl th.r,.kpi b,.td-tile .tn{font-variant-numeric:tabular-nums;font-feature-settings:"tnum","palt" 0}
*{scrollbar-width:thin;scrollbar-color:#C5CFDD transparent}

/* ── 画面の余白と、見出しまわり ── */
.view{padding-top:76px;padding-bottom:64px}
.pagehead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin:2px 0 20px}
.pagehead h1{font-size:24px;line-height:1.35;letter-spacing:.01em}
.pagehead h1::after{width:32px;height:3px;margin-top:9px}
.pagehead p{font-size:13px;line-height:1.7;margin-top:6px}
.pagehead .bar{margin:0!important;gap:8px}
.pagehead .bar label[style]{height:var(--h-ctl)!important;border-color:var(--bd,#D7DEE8)!important;border-radius:var(--rk)!important;transition:border-color .2s,box-shadow .2s}
.pagehead .bar label[style]:focus-within{border-color:var(--blue)!important;box-shadow:var(--ring)}

/* ── ボタン：高さ 40／32 でそろえ、押したときの反応をつける ── */
.btn{height:var(--h-ctl);padding:0 18px;border-radius:var(--rk);font-size:14px;font-weight:600;letter-spacing:.01em;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;transition:background-color .2s var(--ease-o),border-color .2s,color .2s,box-shadow .25s var(--ease-o),transform .15s var(--ease-o)}
.btn.sm{height:var(--h-sm);padding:0 12px;font-size:13px;border-radius:7px}
.btn:not(.ghost):not(.danger):hover{box-shadow:0 6px 16px -8px rgba(42,104,188,.65)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:0;box-shadow:var(--ring)}
.btn[disabled],.btn.off{opacity:.5;pointer-events:none}
.btn svg{flex:none}

/* ── タブ：上の「機能の切り替え」は薄い台の中の白いつまみ、画面内の状態タブは下線 ── */
.hubtabs{display:inline-flex;gap:2px;padding:3px;margin:0 0 16px;background:#E8EDF4;border:0;border-radius:10px;overflow-x:auto;max-width:100%;scrollbar-width:none}
.hubtabs::-webkit-scrollbar{display:none}
.hubtabs a{display:inline-flex;align-items:center;height:34px;padding:0 15px;border-radius:8px;font-size:13.5px;font-weight:600;color:#4A566B;text-decoration:none;white-space:nowrap;transition:background-color .25s var(--ease-o),color .2s,box-shadow .25s}
.hubtabs a:hover{color:var(--ink);background:rgba(255,255,255,.6)}
.hubtabs a.on{background:#fff;color:var(--blue-d);box-shadow:0 1px 3px rgba(16,35,58,.14)}
.utabs{gap:4px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.utab{padding:10px 14px 11px;font-size:14px;font-weight:600;color:var(--soft);border-bottom-width:3px;transition:color .2s,border-color .25s var(--ease-o)}
.utab:hover{color:var(--ink)}
.utab.on{color:var(--blue-d)}
.utab .n{display:inline-block;min-width:20px;padding:1px 7px;margin-left:6px;border-radius:999px;background:#EEF2F8;color:var(--soft);font-size:11.5px;font-weight:700;text-align:center}
.utab.on .n{background:var(--tint);color:var(--blue-d)}

/* ── 絞り込み行 ── */
.bar{gap:8px 10px;margin:0 0 14px}
.bar .lbl{font-size:12.5px;font-weight:600;color:var(--soft);margin-right:2px}
.chip{height:32px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:#3B475C;transition:background-color .2s,border-color .2s,color .2s}
.chip:hover{border-color:#B7C5DA;color:var(--ink)}
.chip.on{background:var(--tint);border-color:var(--blue);color:var(--blue-d)}
.seg{background:#E8EDF4;padding:3px;border-radius:9px;gap:2px}
.seg .segb{border:0;border-radius:7px;background:transparent;padding:5px 13px;font-size:13px;font-weight:600;color:#4A566B;transition:background-color .2s,color .2s,box-shadow .2s}
.seg .segb.on{background:#fff;color:var(--blue-d);box-shadow:0 1px 3px rgba(16,35,58,.14)}
.field .seg{display:inline-flex}

/* ── 入力部品 ── */
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{height:var(--h-ctl);padding:0 12px;border:1px solid var(--bd,#D7DEE8);border-radius:var(--rk);background-color:#fff;font:inherit;font-size:14px;color:var(--ink);transition:border-color .2s,box-shadow .2s,background-color .2s}
textarea{height:auto;min-height:96px;padding:10px 12px;line-height:1.7}
select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235F6B7A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5L6 6l4.5-4.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
input::placeholder,textarea::placeholder{color:#97A1B1}
input:not([type=checkbox]):not([type=radio]):hover,select:hover,textarea:hover{border-color:#B7C5DA}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline:0;border-color:var(--blue);box-shadow:var(--ring)}
input[type=checkbox],input[type=radio]{accent-color:var(--blue);width:16px;height:16px;cursor:pointer}
input[type=date],input[type=month],input[type=datetime-local]{min-width:150px}
.bar select,.bar input:not([type=checkbox]):not([type=radio]){height:36px}
.check{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:#3B475C;cursor:pointer}
.field{margin-bottom:14px}
.field label{display:block;margin-bottom:6px;font-size:12.5px;font-weight:600;color:var(--soft)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}

/* ── 面（カード）と、並べ方 ── */
.card{border:1px solid var(--line);border-radius:var(--rc);box-shadow:var(--sh1);padding:18px 22px;background:#fff}
.card.flush{padding:0;overflow:hidden}
.card h2,.cardhead h2{font-size:15px;font-weight:700;letter-spacing:.01em;margin:0 0 12px}
.card + .card,.card + .tbl-wrap,.tbl-wrap + .card{margin-top:16px}
.grid,.g-2,.g-3{align-items:stretch}
.grid>.card,.g-2>.card,.g-3>.card{margin:0}
.kpis{gap:12px;margin:0 0 16px}
.kpi{padding:13px 16px;border-radius:var(--rc);border:1px solid var(--line);background:#fff;text-align:left;transition:border-color .2s,box-shadow .25s var(--ease-o),background-color .2s}
.kpi:hover{border-color:#B7C5DA;box-shadow:var(--sh2)}
.kpi .l{display:block;font-size:12px;font-weight:600;color:var(--soft)}
.kpi b{display:block;margin-top:2px;font-size:21px;line-height:1.3}
.kpi .s{display:block;font-size:11.5px;color:var(--faint);min-height:1em}
.kpi.bad b{color:var(--red,#C42B1C)}
.kpi.on{background:var(--tint);border-color:var(--blue)}

/* ── 表 ── */
.tbl-wrap,.tw{border:1px solid var(--line);border-radius:var(--rc);background:#fff;overflow:auto;box-shadow:var(--sh1)}
.card .tbl-wrap,.card .tw{border:0;box-shadow:none;border-radius:0}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.tbl th{position:sticky;top:0;z-index:1;padding:11px 14px;background:#F6F8FB;color:var(--soft);font-size:12px;font-weight:700;letter-spacing:.03em;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line)}
.tbl th.r,.tbl td.r{text-align:right}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--line3);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background-color .2s}
.tbl tbody tr:hover td{background:#F7FAFE}
.tbl .sorth{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;padding:0;cursor:pointer}
.tbl .sorth:hover{color:var(--blue)}
.listhead,.lrow{padding:13px 22px}
.listhead{font-size:12px;font-weight:700;letter-spacing:.03em;background:#F6F8FB;border-bottom:1px solid var(--line)}
.lrow{transition:background-color .2s}
.lrow .title{font-weight:600;color:var(--ink)}
.lrow:hover .title{color:var(--blue-d)}
.lrow .sub{margin-top:1px;font-size:12.5px}

/* ── ラベル類：軽く、大きさをそろえる ── */
.kind{min-width:0;padding:3px 10px;border-radius:6px;background:var(--tint);color:var(--blue-d);font-size:12px;font-weight:600;letter-spacing:.01em}
.cols .kindcell .kind{display:inline-block}
.st{min-width:0;padding:3px 11px 3px 9px;border-radius:999px;font-size:12px;font-weight:600;background:#EEF2F8;color:#3B475C;display:inline-flex;align-items:center;gap:6px}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55}
.st.new{background:#E3EEFB;color:var(--blue-d)}.st.new::before{background:var(--org2);opacity:1}
.st.wait{background:#EEF2F8;color:#4A566B}
.st.done{background:transparent;color:var(--faint)}
.st.draft{background:#FFF1E6;color:#9A3412}
.st.void{background:#EEF2F8;color:var(--faint)}
.due{min-width:0;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600;background:#EEF2F8;color:#3B475C}
.due.late{background:#FDE3DB;color:#B93815}
.due.today{background:#FFE9D6;color:#A5500A}
.due.none,.due.past{background:none;color:var(--faint);font-weight:500}
.chip2{display:inline-block;padding:2px 9px;border-radius:6px;font-size:12px;font-weight:600}

/* ── 空の表示 ── */
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:44px 20px;text-align:center;font-size:13.5px;line-height:1.8;color:var(--faint)}
.empty::before{content:"";width:44px;height:44px;border-radius:50%;background:#EEF2F8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%238A94A3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l2.5-7h11L20 13v6H4z'/%3E%3Cpath d='M4 13h4.5l1 2h5l1-2H20'/%3E%3C/svg%3E") center/22px no-repeat}
.todo .empty,.td-sec .empty{padding:28px 20px}

/* ── 左のメニュー ── */
.side nav a{transition:background-color .2s,color .2s}
.side nav a.on{background:var(--tint);color:var(--blue-d);font-weight:700}
.nhead{font-size:11px;letter-spacing:.12em;color:var(--faint)}
.side .me{margin-top:6px;padding:12px 10px;border-top:1px solid var(--line2);font-size:12px;color:var(--soft);background:#fff;position:sticky;bottom:0}
.topbar{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* ── 小さな画面 ── */
@media(max-width:860px){
  .view{padding-top:68px}
  .pagehead{align-items:flex-start}
  .pagehead .bar{width:100%}
  .pagehead .bar .btn{flex:1 1 auto}
  .hubtabs{display:flex;width:100%}
  .row2{grid-template-columns:1fr}
  .tbl-wrap,.tw{-webkit-overflow-scrolling:touch}
  .card{padding:14px 16px}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* 検索窓：左の虫めがね分の余白を守る（上の汎用入力より優先） */
input[type=search]:not(#_){padding-left:36px;padding-right:12px}
.gsearch input:not(#_){height:42px;padding:0 14px 0 42px;border-radius:10px}
input[type=search]::-webkit-search-cancel-button{opacity:.5;cursor:pointer}

/* 左メニュー：項目が多くてもユーザー欄は下に固定、メニューだけ中でスクロール */
@media(min-width:861px){
  .side{overflow:hidden}
  .side nav#nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:8px}
  .side .me{flex:none}
}

/* 表を入れたカードは枠いっぱいに／表内ボタンは軽く／ドラッグ置き場は大きく */
.card:has(>.tbl-wrap:only-child),.card:has(>.tw:only-child){padding:0;overflow:hidden}
.card>.tbl-wrap:only-child .tbl th:first-child,.card>.tw:only-child .tbl th:first-child{padding-left:22px}
.card>.tbl-wrap:only-child .tbl td:first-child,.card>.tw:only-child .tbl td:first-child{padding-left:22px}
.tbl td .btn.sm:not(.ghost):not(.danger){background:var(--tint);border-color:transparent;color:var(--blue-d)}
.tbl td .btn.sm:not(.ghost):not(.danger):hover{background:#D9E8FA;box-shadow:none}
.dropz{display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 20px;border:1.5px dashed #B7C5DA;border-radius:var(--rc);background:#FAFCFE;text-align:center;font-size:14px;transition:border-color .2s,background-color .2s}
.dropz::before{content:"";width:40px;height:40px;margin-bottom:6px;border-radius:50%;background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232A68BC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V5M7 10l5-5 5 5M5 19h14'/%3E%3C/svg%3E") center/20px no-repeat}
.dropz b{color:var(--ink);font-size:14.5px}
.dropz.on,.dropz:hover{background:var(--tint);border-color:var(--blue)}

@media(max-width:860px){
  .hubtabs{flex-wrap:nowrap;overflow-x:auto}
  .hubtabs a{flex:none}
  .card>.tbl-wrap:only-child .tbl th:first-child,.card>.tbl-wrap:only-child .tbl td:first-child{padding-left:16px}
  .tbl-wrap .tbl,.tw .tbl{min-width:620px}
  .tbl th,.tbl td{padding-left:12px;padding-right:12px}
  .bar select,.bar input[type=search]{flex:1 1 140px;max-width:none}
}

/* class なしの素の table（取引先など）も同じ見た目に */
.tw table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.tw table th{padding:11px 14px;background:#F6F8FB;color:var(--soft);font-size:12px;font-weight:700;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line)}
.tw table td{padding:13px 14px;border-bottom:1px solid var(--line3);vertical-align:middle}
.tw table tbody tr:last-child td{border-bottom:0}
.tw table tbody tr:hover td{background:#F7FAFE}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600}
@media(max-width:860px){.tw table{min-width:640px}.tw table td:nth-child(2){min-width:140px}.tw table td:nth-child(4){min-width:120px}}

/* どこにある検索窓にも虫めがね。ファイル管理などの絞り込み行の入力・選択も揃える */
input[type=search]:not(#_){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a97ab' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px 50%}
.fl-bar{gap:8px 10px}
.fl-bar input:not(#_),.fl-bar select:not(#_){height:var(--h-ctl);border-radius:var(--rk)}
.fl-bar select:not(#_){padding-right:34px;min-width:132px}
select:not(#_){background-position:right 12px center;background-repeat:no-repeat}

.fl-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:40px 20px;text-align:center;color:var(--faint);font-size:13.5px}
.fl-empty b{color:var(--ink)}

/* 営業案件のボード：案件のない段階は出さない（全部ないときだけ、案内を出す） */
.dl-board:empty{display:block;overflow:visible}
.dl-board:empty::before{content:"案件はありません。「＋ 案件」から登録します";display:block;padding:36px 16px;text-align:center;color:var(--mute,#667085);font-size:13px}