/* 8DESK 新デザイン（v3）— いちばん最後に読み込む
   ・地は灰（#EEF1F6）、面は白、区切りは 1px の罫線。影は使わない
   ・操作は青 1 色。赤・琥珀・紫・緑は「状態」だけ（色＋言葉＋位置で伝える）
   ・角丸：カード 16／入力 12／ボタンは丸。操作できるものは高さ 44px
   ・左メニューは白。いまの場所は淡い青の面
   ・スマホは下のタブ。真ん中の「＋」で登録 */
:root{
  --blue:#2552C8;--blue-d:#1D44AA;--blue-a:#173A93;--blue-l:#8FA9EE;--tint:#E8EEFC;--tint2:#B9C9F4;--mist:#F6F8FB;
  --ink:#121A2B;--soft:#3A4558;--faint:#5B6577;
  --line:#DEE3EC;--line2:#E7EBF2;--line3:#E7EBF2;--field:#C9D0DC;--bg:#EEF1F6;--card:#fff;--surface-2:#F6F8FB;--sunk:#E9EDF3;
  --n10:#EEF1F6;--n20:#DEE3EC;--n30:#C9D0DC;--n40:#8C96A8;--n50:#5B6577;--n60:#3A4558;
  --green:#17693F;--green-bg:#E4F4EB;--green-bd:#BFE3CE;
  --red:#B42318;--red-solid:#B42318;--red-bg:#FDECEC;--red-bd:#F5C4C0;
  --warnbg:#FDF1D8;--warnbd:#EBCB84;--warnfg:#8A4B00;
  --org:#B42318;--org2:#2552C8;
  --nav:#121E29;--nav-2:#E8EEFC;--nav-3:#F3F5F9;--nav-line:#DEE3EC;--nav-fg:#3A4558;--nav-dim:#5B6577;--nav-mark:#2552C8;--nav-on:#1F46B0;
  --r1:8px;--r2:12px;--r3:12px;--r4:16px;
}
html body{font-family:'Inter','Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic UI',sans-serif;background:var(--bg);color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
a{color:var(--blue)}

/* ===== 左メニュー（白） ===== */
html body .app .side{background:#fff!important;border-right:1px solid var(--line)!important;color:var(--nav-fg)}
html body .app .side .brand b,html body .app .side .brand .brand-g{color:var(--ink)!important;font-weight:800;letter-spacing:-.02em}
html body .app .side .brand b span,html body .app .side .brand .brand-g span{color:var(--blue)!important}
html body .app .side .brand span{color:var(--faint)!important}
html body .app .side .sbtoggle{color:var(--faint)}
html body .app .side .sbtoggle:hover{background:var(--nav-3);color:var(--ink)}
html body .app .side nav a{color:var(--nav-fg)!important;height:44px;border-radius:12px;font-size:14px;font-weight:500}
html body .app .side nav a svg{opacity:.9}
html body .app .side nav a:hover{background:var(--nav-3)!important;color:var(--ink)!important}
html body .app .side nav a.on{background:var(--nav-2)!important;color:var(--nav-on)!important;font-weight:700}
html body .app .side nav a.on svg{color:var(--nav-on);opacity:1}
html body .app .side nav a.on::before{display:none}
html body .app .side nav .nhead{color:var(--faint)!important}
html body .app .side nav .nhead:hover{color:var(--ink)!important}
html body .app .side nav a.navmenu{color:var(--faint)!important}
html body .app .side .me{background:transparent!important;border-top:1px solid var(--line)!important;color:var(--faint)!important}
html body .app .side .me a{color:var(--faint)}
html body .app .side .newmenu>.btn{background:var(--blue)!important;color:#fff!important;border-color:var(--blue)!important;border-radius:99px;height:44px;font-weight:700}
html body .app .side .newmenu>.btn:hover{background:var(--blue-d)!important}
html body .app .side .count{background:var(--red-solid)!important;color:#fff!important}
html body .app .side nav::-webkit-scrollbar-thumb{background:var(--line);background-clip:content-box}
html body .app .side nav{scrollbar-color:var(--line) transparent!important}
body.sb-mini .app .side nav a.on>span[style]{background:var(--nav-2);color:var(--nav-on)}

/* 無料トライアルなどの小さな札 */
.trialpill{background:var(--tint);color:var(--nav-on);border:0}

/* ===== 上の帯・検索 ===== */
.app .topbar{background:var(--bg);border-bottom:0}
.app .topbar input,.app .topbar .search input{background-color:#fff;border:1px solid var(--line);border-radius:99px;height:44px;padding-left:44px}

/* ===== 画面の題 ===== */
.pagehead h1,.bk-ttl h1,.view>h1{font-size:28px;line-height:1.3;font-weight:700;letter-spacing:0;color:var(--ink)}
.pagehead>p,.pagehead p{color:var(--faint);font-size:13px}
.pagehead{align-items:center}

/* ===== カード ===== */
.card,.bk-panel,.panel,.tile,.kpi,.td-m,.tbl-wrap,.pp-box,.todo,.pager{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:none}
.card.flush{overflow:hidden}
.card>h2,.cardhead h2{font-size:16px;font-weight:700}
.cardhead{padding:18px 20px 12px}
.cardhead a{font-size:13px;font-weight:600;color:var(--blue)}
.empty{color:var(--faint)}

/* ===== ボタン：丸・高さ44 ===== */
.btn,button.btn,a.btn{border-radius:99px;min-height:44px;height:auto;padding:0 20px;font-weight:600;font-size:14px;gap:8px}
.btn:not(.ghost):not(.danger){background:var(--blue);border-color:var(--blue);color:#fff}
.btn:not(.ghost):not(.danger):hover{background:var(--blue-d);border-color:var(--blue-d)}
.btn.ghost{background:#fff;border:1px solid var(--field);color:#2A3447}
.btn.ghost:hover{background:var(--mist);border-color:#8C9BBA}
.btn.sm{min-height:36px;padding:0 14px;font-size:13px}
.btn.danger{border-radius:99px}
input,select,textarea{border-radius:12px;border-color:var(--field)}
input:not([type=checkbox]):not([type=radio]),select{min-height:44px}
input::placeholder,textarea::placeholder{color:#6B7587}

/* ===== 状態・期限＝丸いチップ ===== */
.st,.due,.badge:not(.count),.kind{border-radius:99px;border:0;font-weight:600;letter-spacing:0;padding:3px 11px;font-size:12px;line-height:1.7}
.st{background:var(--n10);color:var(--n60)}
.st.new{background:var(--tint);color:#1F46B0}
.st.wait{background:#ECE9FB;color:#4B3FB0}
.st.done,.st.ok{background:var(--green-bg);color:var(--green)}
.st.warn,.st.draft{background:var(--warnbg);color:var(--warnfg)}
.st.bad,.st.over{background:var(--red-bg);color:var(--red)}
.due{background:var(--n10);color:var(--n60)}
.due.late{background:var(--red-bg);color:var(--red)}
.due.today{background:var(--warnbg);color:var(--warnfg)}
.due.none,.due.past{background:none;color:var(--faint);font-weight:500}
.kind,.badge.type{background:var(--tint);color:#1F46B0}
.chip2.ok{background:var(--green-bg);color:var(--green);border:0}.chip2.warn{background:var(--warnbg);color:var(--warnfg);border:0}.chip2.bad{background:var(--red-bg);color:var(--red);border:0}

/* ===== 今日：件数のカード ===== */
.grid.g-6{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px}
.tile{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:18px 20px;min-height:88px;color:var(--ink);text-decoration:none}
.tile:hover{border-color:#B9C4DA}
.tile .t{font-size:13px;color:var(--faint);font-weight:500;order:2}
.tile .n{order:1;display:flex;align-items:baseline;gap:4px}
.tile .n b{font-size:28px;line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums}
.tile .n span{font-size:13px;color:var(--faint)}
.tile.solid{background:var(--tint);border-color:var(--tint2)}
.tile.solid .n b{color:#1F46B0}
.tile.warn{background:var(--red-bg);border-color:var(--red-bd)}
.tile.warn .n b,.tile.warn .t{color:var(--red)}

/* 今日やること */
.todo{display:flex;align-items:center;gap:14px;padding:14px 20px;border:0;border-top:1px solid var(--line2);border-radius:0;color:var(--ink);text-decoration:none}
.todo:hover{background:#F8FAFD}
.todo .main{flex:1;min-width:0;display:flex;flex-direction:column}
.todo .main b{font-size:15px;font-weight:600;line-height:1.4}
.todo .main span{font-size:12.5px;color:var(--faint)}
.todo .who{font-size:12.5px;color:var(--faint)}

/* ===== 案件一覧：行 ===== */
.cl-row{padding:14px 20px;border-bottom:1px solid var(--line2)}
.cl-row::before{display:none}
.cl-row:hover{background:#F8FAFD}
.cl-kind{color:var(--faint);font-weight:600}
.cl-title{font-size:15px;font-weight:600}
.cl-row.is-new .cl-title{font-weight:700}
.cl-types .chip,.utab{border-radius:99px}
.cl-types .chip{height:40px;padding:0 16px;background:#fff;border:1px solid var(--line);color:var(--soft);font-weight:600}
.cl-types .chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.cl-types .chip .dot{border-radius:50%}
.cl-search{border-radius:99px;min-height:44px;background:#fff;border:1px solid var(--line);padding:0 16px}
.cl-sel select{border-radius:12px;min-height:40px}
.utabs{border-bottom:1px solid var(--line)!important}
.utabs .utab{color:var(--faint)}
.utabs .utab.on{color:var(--blue)!important;border-bottom:2px solid var(--blue)!important;background:none!important;border-color:transparent!important;font-weight:700!important}
.cl-who .av,.av{background:#DDE5F8;color:#1F46B0}

/* ===== 案件の詳細 ===== */
.pill{border-radius:12px;background:#fff;border:1px solid var(--line)}
.pill.warn b{color:var(--red)}
.kv dt{color:var(--faint)}

/* 状態を変えるボタン */
.steps{gap:8px;margin:0 0 20px}
.step{min-height:44px;border-radius:99px;padding:0 18px;font-size:13.5px;font-weight:600;color:var(--soft);background:#fff;border:1px solid var(--field)}
.step:hover{border-color:#8C9BBA}
.step.cur{background:var(--tint);border-color:var(--blue);color:#1F46B0;font-weight:700}
.step.past{background:#fff;border-color:var(--field);color:var(--faint)}
.step.end{border-style:solid}

/* 今日やること：区分と状態の点 */
.sec{display:flex;align-items:center;gap:8px;padding:10px 20px;background:var(--mist);border-top:1px solid var(--line2);font-size:12px;font-weight:700;color:var(--faint);letter-spacing:.04em}
.sec span{font-weight:600;color:var(--faint)}
.sec.late{color:var(--red)}
.sec.today{color:var(--warnfg)}
.sd{width:9px;height:9px;border-radius:50%;flex:none;background:#C27400}
.sd.new{background:var(--blue)}
.sd.wait{background:#6D5BD0}
.sd.done{background:#1F9254}

/* ===== 下のタブ（スマホ） ===== */
@media (max-width:860px){
  html body .app .side{border-right:0!important}
  .pagehead h1{font-size:22px}
  .pagehead,.pagehead>div{text-align:left}
  .pagehead .btn{width:100%}
  .grid.g-6{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .tile{min-height:88px;padding:14px;gap:2px}
  .tile .n b{font-size:24px}
  .tile .t{font-size:12px}
  .todo{padding:14px 16px;gap:10px;flex-wrap:wrap}
  .todo .main{flex:1 1 60%}
  .todo .who{display:none}
  .tabbar{background:#fff;border-top:1px solid var(--line);box-shadow:none}
  .tabbar>a,.tabbar>button{color:var(--faint);font-weight:600}
  .tabbar>a.on{background:var(--tint);color:#1F46B0;border-radius:14px}
  .steps{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  .step{flex:none}
}

.pagehead h1,.pagehead p{text-align:left!important}
.pagehead>div{align-items:flex-start}

:root{--k-order:#2552C8}