/* KAKERU BillFlow — 共通スタイル (KAKERUテーマ) */
:root{
  --bg:#F5F6FA; --navy:#1E1E2E; --navy2:#26263A;
  --accent:#4F8EF7; --accent-dark:#2F5FD7;
  --green:#46B98E; --orange:#F59E42; --red:#E5615C; --purple:#8B7CF7;
  --text:#2B2B3A; --muted:#8A8FA3; --line:#E4E6EF; --card:#FFFFFF; --stamp:#D6403A;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;background:var(--bg);color:var(--text);font-size:14.5px;}
a{color:var(--accent-dark);text-decoration:none;}
.hidden{display:none!important;}

/* ===== レイアウト ===== */
#app{display:flex;min-height:100vh;}
.sidebar{width:216px;background:var(--navy);color:#C9CCDD;flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.logo{display:block;font-size:19px;letter-spacing:.3px;padding:22px 20px 4px;text-decoration:none;
  white-space:nowrap;}   /* サイドバー幅で必ず1行に収める */
.logo b{font-weight:800;background:linear-gradient(135deg,#4F8EF7,#7DB2FF 45%,#2F5FD7);-webkit-background-clip:text;background-clip:text;color:transparent;}
.logo span{font-weight:300;color:#fff;}
.logo-sub{color:#6E7288;font-size:12px;letter-spacing:2px;padding:0 20px 18px;margin-top:2px;}
.nav-label{font-size:11.5px;color:#6E7288;padding:16px 20px 6px;letter-spacing:1.5px;}
.nav-item{display:flex;align-items:center;gap:8px;padding:10px 20px;cursor:pointer;font-size:14px;border-left:3px solid transparent;color:#C9CCDD;}
/* ラベルに改行が入る項目(個人設定など)を、途中で切れずに意図した位置で折り返す */
.nav-item .nav-txt{line-height:1.45;}
.nav-item .nav-txt small{display:block;font-size:11.5px;color:#8E93A8;}
.nav-item:hover{background:var(--navy2);color:#fff;}
.nav-item.active{background:var(--navy2);color:#fff;border-left-color:var(--accent);}
.nav-item .badge-n{margin-left:auto;background:var(--red);color:#fff;font-size:11px;border-radius:9px;padding:1px 7px;font-weight:600;}
.nav-item .badge-n.gray{background:#4A4A63;color:#B9BCCE;}  /* 件数の目安(緊急ではない) */
.sidebar .foot{margin-top:auto;padding:16px 20px;font-size:12px;color:#6E7288;border-top:1px solid #33334a;}
.main{flex:1;min-width:0;}
.topbar{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 26px;height:56px;}
.topbar h1{font-size:17px;font-weight:700;}
.topbar .user{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;}
.lv-chip{background:#EEF3FE;color:var(--accent-dark);font-size:11.5px;padding:2px 8px;border-radius:9px;font-weight:600;}
.dept-chip{background:#F1F2F6;color:#5A6076;font-size:11.5px;padding:2px 8px;border-radius:9px;font-weight:600;}
.logout{font-size:17px;color:var(--muted);padding:4px;}
/* 表示中の部署の切り替え(全部署を閲覧できる人だけに出る) */
.scope-pick{display:flex;align-items:center;gap:6px;margin-left:8px;}
.scope-pick .ic{font-size:14px;}
.scope-pick select{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 8px;font-size:13px;color:var(--text);max-width:230px;}
.scope-pick select:focus{outline:none;border-color:var(--accent);}
/* 自部署以外を見ているときの注意帯 */
.scope-bar{background:#EEF3FE;border:1px solid #C9DAFB;color:var(--accent-dark);font-size:12.5px;
  border-radius:8px;padding:9px 14px;margin-bottom:16px;}
.scope-bar a{margin-left:8px;font-weight:600;text-decoration:underline;}
.content{padding:24px 26px 60px;max-width:1180px;}

/* ===== 部品 ===== */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;}
.card .k{font-size:12.5px;color:var(--muted);margin-bottom:8px;}
.card .v{font-size:23px;font-weight:800;letter-spacing:.3px;}
.card .v small{font-size:13px;font-weight:600;color:var(--muted);margin-left:2px;}
.card .sub{font-size:12px;margin-top:6px;color:var(--muted);}
.card .sub.warn{color:var(--orange);font-weight:600;}
.card .sub.bad{color:var(--red);font-weight:600;}
.card.accent{border-top:3px solid var(--accent);}
.card.green{border-top:3px solid var(--green);}
.card.orange{border-top:3px solid var(--orange);}
.card.red{border-top:3px solid var(--red);}

.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:20px;overflow:hidden;}
.panel-h{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line);}
.panel-h h2{font-size:14.5px;font-weight:700;}
.panel-h .right{margin-left:auto;display:flex;gap:8px;align-items:center;}
.panel-b{padding:18px 20px;}

table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);background:#FAFBFE;white-space:nowrap;}
td{padding:10px 12px;border-bottom:1px solid #F0F1F7;vertical-align:middle;}
tr:hover td{background:#F8FAFF;}
tr.clickable{cursor:pointer;}
/* 処理の済んだ行。消さずに残すので、未処理より控えめに見せて視線が上に向くようにする */
tr.row-done td{background:#FCFCFE;color:#8A90A2;}
tr.row-done:hover td{background:#F4F6FB;}
tr.row-done .thumb{opacity:.55;}
tr.row-sep td{background:#F5F6FA;border-bottom:1px solid var(--line);
  font-size:11.5px;font-weight:700;color:var(--muted);padding:6px 12px;letter-spacing:.04em;}
tr.row-sep:hover td{background:#F5F6FA;}

.badge{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:10px;white-space:nowrap;}
.b-gray{background:#EDEFF5;color:#70768C;}
.b-amber{background:#FDF3E3;color:#C07A17;}
.b-blue{background:#E8F0FE;color:var(--accent-dark);}
.b-green{background:#E4F6EE;color:#1F9368;}
.b-red{background:#FDEAE9;color:#C4423D;}
.b-purple{background:#EFEBFE;color:#6A58D6;}

.btn{display:inline-flex;align-items:center;gap:6px;justify-content:center;padding:9px 16px;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;font-family:inherit;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;text-decoration:none;}
.btn:hover{opacity:.9;}
.btn.big{width:100%;padding:12px;font-size:15.5px;}
.btn.ghost{background:#fff;color:var(--accent);border:1px solid var(--accent);}
.btn.gray{background:#EDEFF5;color:#555b70;}
.btn.danger{background:#fff;color:var(--red);border:1px solid var(--red);}
.btn.green{background:var(--green);}
.btn.sm{padding:6px 12px;font-size:13px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* contain で書面全体を表示する(cover だと上部だけ切り取られて何の書類か分からない) */
.thumb{width:38px;height:54px;border:1px solid var(--line);border-radius:4px;background:#fff;object-fit:contain;display:block;}
.thumb-ph{width:38px;height:54px;border:1px solid var(--line);border-radius:4px;background:#FAFBFE;display:flex;align-items:center;justify-content:center;font-size:17px;}

.seal{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--stamp);color:var(--stamp);border-radius:50%;font-weight:700;background:rgba(255,255,255,.75);line-height:1;font-family:"Hiragino Mincho ProN",serif;}
.seal.mini{width:26px;height:26px;font-size:11px;border-width:1.5px;}
.seal.empty{border:1.5px dashed #C6CADB;color:#C6CADB;background:transparent;}
.seal-pair{display:inline-flex;gap:5px;align-items:center;}

.tabs{display:flex;gap:4px;background:#EDEFF5;padding:4px;border-radius:9px;width:fit-content;}
.tab{padding:7px 18px;border-radius:7px;font-size:13.5px;font-weight:600;color:#70768C;cursor:pointer;border:none;background:transparent;font-family:inherit;text-decoration:none;}
.tab.active{background:#fff;color:var(--accent-dark);box-shadow:0 1px 4px rgba(30,30,46,.12);}

.form-row{margin-bottom:14px;}
.form-row label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;}
.form-row input,.form-row select,.form-row textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:#fff;font-family:inherit;color:var(--text);}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--accent);}
.form-row input.ai-filled{border-color:#C9BDF9;background:#FBFAFF;}
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
select.filter{padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-size:13.5px;background:#fff;font-family:inherit;color:var(--text);}
input.filter{padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-size:13.5px;background:#fff;font-family:inherit;color:var(--text);}

.note-bar{background:#FFF9EC;border:1px solid #F3E3BC;color:#8A6D1F;font-size:12.5px;border-radius:8px;padding:9px 14px;margin-bottom:16px;}
/* 登録画面でExcel/Wordを選んだときの案内(PDF化を促す) */
.warn-note{background:#FFF9EC;border:1px solid #F3E3BC;color:#8A6D1F;font-size:12.5px;
  border-radius:8px;padding:11px 14px;line-height:1.85;}
.warn-note b{color:#7A5E10;}
.warn-note .sub{color:#A08840;font-size:12px;}
/* ===== 書類の履歴 ===== */
/* 詳細画面のパネル。高さで切ると差し戻し理由が読めなくなるので枠で囲わない */
.hist-list{font-size:12.5px;color:var(--muted);}
.hist-row{padding:6px 0;border-bottom:1px dashed #EEF0F7;line-height:1.75;}
.hist-row:last-child{border-bottom:none;}
.hist-row .t{color:#A6ABBD;margin-right:7px;white-space:nowrap;}
.hist-row .w{color:var(--text);font-weight:600;margin-right:7px;}
.hist-row .a{display:inline-block;background:#F1F3FA;border-radius:9px;padding:1px 8px;
  color:#5B6280;font-size:11.5px;margin-right:6px;white-space:nowrap;}
.hist-row .d{word-break:break-word;}
.hist-toggle{display:block;width:100%;margin-top:8px;padding:7px;border:1px solid var(--line);
  background:#FAFBFE;border-radius:8px;color:var(--accent-dark);font-size:12px;font-weight:700;
  cursor:pointer;font-family:inherit;}
.hist-toggle:hover{background:#F2F6FF;border-color:#C9D6F2;}

/* 履歴の専用ページ(監査で1枚出す用) */
.hist-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.hist-head .right{margin-left:auto;display:flex;gap:8px;}
.hist-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 18px;
  background:#FAFBFE;border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:14px;}
.hist-meta dt{font-size:11.5px;color:var(--muted);margin-bottom:2px;}
.hist-meta dd{font-size:14px;font-weight:700;}
.hist-note{font-size:13px;color:var(--muted);margin-bottom:14px;}
.hist-table{width:100%;border-collapse:collapse;font-size:13px;}
.hist-table th{text-align:left;font-size:11.5px;color:var(--muted);font-weight:600;
  padding:8px 10px;border-bottom:1px solid var(--line);background:#FAFBFE;white-space:nowrap;}
.hist-table td{padding:9px 10px;border-bottom:1px solid #F0F1F7;vertical-align:top;}
.hist-table .num{color:var(--muted);font-size:12px;}
.hist-table .dt{white-space:nowrap;font-size:12.5px;}
.hist-table .dtl{word-break:break-word;line-height:1.7;}
.hist-table .ip{color:var(--muted);font-size:11.5px;white-space:nowrap;}
.hist-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--muted);line-height:1.9;}

/* 監査へ紙で出すことがあるため、画面まわりを落として本文だけ残す */
@media print{
  .sidebar,.topbar,.mobile-bar,.scope-bar,.no-print,.drawer-veil{display:none!important;}
  #app,.main,.content{display:block!important;margin:0!important;padding:0!important;}
  body{background:#fff;font-size:11pt;}
  .panel{border:none!important;box-shadow:none!important;}
  .panel-h{border-bottom:1px solid #000;}
  .hist-table th{background:#fff;border-bottom:1px solid #000;}
  .hist-table tr{page-break-inside:avoid;}
  .badge{border:1px solid #999;color:#000!important;background:#fff!important;}
}

/* 請求書ファイルの差し替えパネル(詳細画面) */
#swap-form input[type=file]{width:100%;font-size:12.5px;}
#swap-msg{font-size:12.5px;line-height:1.85;}
#swap-msg .sub{color:var(--muted);font-size:12px;}
/* サーバーパネルに貼り付けるcronコマンド(長いので折り返して全体を見せる) */
.cron-cmd{flex:1;min-width:0;display:block;background:#2B2E3B;color:#E6E9F5;border-radius:8px;
  padding:10px 12px;font-size:12px;line-height:1.7;word-break:break-all;white-space:pre-wrap;
  font-family:"SFMono-Regular",Consolas,monospace;user-select:all;}
.ok-bar{background:#E4F6EE;border:1px solid #BCE3D2;color:#1F9368;font-size:12.5px;border-radius:8px;padding:9px 14px;margin-bottom:16px;}
.err-bar{background:#FDEAE9;border:1px solid #F3C9C7;color:#C4423D;font-size:12.5px;border-radius:8px;padding:9px 14px;margin-bottom:16px;}
.ai-chip{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#EFEBFE,#E8F0FE);color:#6A58D6;font-size:12px;font-weight:700;padding:4px 12px;border-radius:12px;}
/* AI読み取り中。完了チップと同じ場所に出して、進行中→完了で視線が動かないようにする */
.ai-busy-chip{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,#EFEBFE,#E8F0FE);
  color:#6A58D6;font-size:12px;font-weight:700;padding:4px 12px;border-radius:12px;}
/* flex:none を付けないと、幅の狭い画面でチップに押しつぶされて楕円になる */
.ai-busy-chip .spin{flex:0 0 auto;box-sizing:border-box;width:12px;height:12px;
  border:2px solid #C6BAF4;border-top-color:#6A58D6;border-radius:50%;
  animation:bf-spin .7s linear infinite;}
.ai-busy-chip,.ai-chip{white-space:nowrap;}
/* 長いチップに押されて見出しが1文字ずつ折り返さないようにする。
   幅が足りないときは、見出しを縮めるのではなくチップ側を下の行へ回す */
.reg-form-panel .panel-h{flex-wrap:wrap;row-gap:8px;}
.reg-form-panel .panel-h h2{white-space:nowrap;flex:0 0 auto;}
@keyframes bf-spin{to{transform:rotate(360deg);}}
/* AIが埋める欄だけを光らせる。どこが自動入力されるのかを先に見せる */
.form-row.ai-loading > label{color:#6A58D6;font-weight:700;}
.form-row.ai-loading input{color:transparent!important;border-color:#C9D6F2;
  background-image:linear-gradient(100deg,#F4F6FD 32%,#E3EAFA 50%,#F4F6FD 68%);
  background-size:220% 100%;animation:bf-shimmer 1.15s linear infinite;cursor:progress;}
.form-row.ai-loading input::placeholder{color:transparent;}
.form-row.ai-loading input::-webkit-calendar-picker-indicator{opacity:.25;}
@keyframes bf-shimmer{from{background-position:220% 0;}to{background-position:-220% 0;}}
/* 動きが苦手な人・省電力設定では点滅させない(状態は色で分かる) */
@media (prefers-reduced-motion:reduce){
  .ai-busy-chip .spin{animation:none;}
  .form-row.ai-loading input{animation:none;background-image:none;background-color:#EDF1FB;}
  /* 「›」は動かさず、色だけで反応させる */
  .alist a.row-link:hover .go{transform:none;}
}

.toggle{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0;vertical-align:middle;}
.toggle input{display:none;}
.toggle .tr{position:absolute;inset:0;background:#D4D7E3;border-radius:12px;transition:.2s;cursor:pointer;display:block;}
.toggle .tr::after{content:"";position:absolute;width:18px;height:18px;background:#fff;border-radius:50%;top:3px;left:3px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.toggle input:checked + .tr{background:var(--green);}
.toggle input:checked + .tr::after{left:23px;}

.dropzone{border:2px dashed #B9C6E8;border-radius:12px;background:#F8FAFF;padding:44px 20px;text-align:center;color:var(--muted);cursor:pointer;transition:.15s;}
.dropzone.drag{background:#E8F0FE;border-color:var(--accent);}
.dropzone .ic{font-size:34px;margin-bottom:10px;}
.dropzone b{color:var(--accent-dark);}
/* Word/Excelは登録できるが機能が使えない。落とす前に分かるようにここで断っておく */
.dropzone .dz-sub{font-size:11.5px;color:#9AA3BD;margin-top:7px;}
/* ファイル選択後は小さくして、プレビューに縦幅をゆずる */
.dropzone.compact{padding:10px 14px;font-size:12.5px;display:flex;align-items:center;justify-content:center;gap:10px;}
.dropzone.compact .ic{font-size:17px;margin:0;}
.dropzone.compact .dz-sub{display:none;}
.dropzone.compact br{display:none;}
.dropzone.compact .btn{padding:4px 10px;font-size:12px;}

.alist{list-style:none;}
.alist li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #F0F1F7;font-size:13.5px;}
.alist li:last-child{border-bottom:none;}
.alist .amt{margin-left:auto;font-weight:700;white-space:nowrap;}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

/* ダッシュボードの明細行。行ごと <a> にして、押せることが見て分かるようにする。
   ・「›」は常時表示（マウスを乗せる前・スマホでも「開ける項目」と分かるように）
   ・区切り線は li 側に持たせ、a は行いっぱいに広げる */
.alist li.rl{display:block;padding:0;}
.alist a.row-link{display:flex;align-items:center;gap:12px;padding:11px 8px;margin:0 -8px;
  color:inherit;text-decoration:none;border-radius:8px;transition:background .13s ease;}
.alist a.row-link:hover{background:#F2F6FF;}
.alist a.row-link:hover .nm{color:var(--accent-dark);}
.alist .go{margin-left:2px;color:#C6CBDC;font-size:17px;line-height:1;flex-shrink:0;
  transition:transform .13s ease,color .13s ease;}
.alist a.row-link:hover .go{color:var(--accent);transform:translateX(3px);}
/* キーボード操作でも、いまどの行にいるか分かるようにする */
.alist a.row-link:focus-visible{outline:2px solid var(--accent);outline-offset:1px;background:#F2F6FF;}
/* 指で押したときの手応え(タッチにはホバーがないため) */
.alist a.row-link:active{background:#E8EFFF;}

/* ===== ログイン ===== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1E1E2E 0%,#232345 55%,#2F3A6E 100%);}
.login-card{width:380px;background:#fff;border-radius:14px;padding:38px 36px 32px;box-shadow:0 20px 60px rgba(0,0,0,.35);}
.login-card .logo{font-size:26px;padding:0;}
.login-card .logo span{color:var(--navy);}
.login-card .logo-sub{color:var(--muted);padding:0;margin-top:4px;}
.login-card label{display:block;font-size:12.5px;color:var(--muted);margin:18px 0 6px;}
.login-card input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font-size:15px;background:#FAFBFE;}
.login-card input:focus{outline:none;border-color:var(--accent);}
.login-card .btn.big{margin-top:26px;}

/* ===== 詳細/押印画面 ===== */
.detail-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start;}
.pdf-stage{background:#5A5D6E;border-radius:12px;padding:20px;display:flex;flex-direction:column;align-items:center;position:relative;min-height:400px;}
.pdf-toolbar{background:rgba(30,30,46,.92);color:#DDD;border-radius:8px;display:flex;gap:2px;padding:4px;font-size:12.5px;margin-bottom:14px;z-index:5;flex-wrap:wrap;justify-content:center;}
.pdf-toolbar button{background:transparent;border:none;color:#DDD;padding:6px 12px;border-radius:6px;cursor:pointer;font-family:inherit;font-size:12.5px;white-space:nowrap;}
.pdf-toolbar button:hover{background:rgba(255,255,255,.12);}
.pdf-toolbar button.on{background:var(--accent);color:#fff;}
#page-wrap{position:relative;box-shadow:0 10px 30px rgba(0,0,0,.4);line-height:0;max-width:100%;}
#page-wrap canvas{max-width:100%;height:auto;display:block;}
#overlay{position:absolute;inset:0;line-height:normal;}
.ov-stamp{position:absolute;cursor:move;user-select:none;-webkit-user-select:none;touch-action:none;}
.ov-stamp img{width:100%;height:auto;display:block;pointer-events:none;}
.ov-stamp.mine:hover{outline:2px dashed var(--accent);}
.ov-stamp .rsz{position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:nwse-resize;display:none;touch-action:none;}
.ov-stamp.mine:hover .rsz{display:block;}
.ov-stamp .szlabel{position:absolute;top:-22px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;font-size:11px;padding:2px 8px;border-radius:8px;white-space:nowrap;display:none;}
.ov-note{position:absolute;color:var(--accent-dark);font-weight:600;border:1px dashed transparent;padding:2px 6px;border-radius:4px;background:rgba(232,240,254,.75);cursor:move;user-select:none;-webkit-user-select:none;white-space:pre-wrap;touch-action:none;line-height:1.4;/* 書き出し時の行間と合わせる */}
.ov-note:hover{border-color:var(--accent);}
.ov-note .del{position:absolute;top:-9px;right:-9px;width:18px;height:18px;border-radius:50%;background:var(--red);color:#fff;font-size:12px;line-height:18px;text-align:center;cursor:pointer;display:none;}
.ov-note:hover .del,.ov-note.selected .del{display:block;}
/* 本文(その場編集の対象)。編集中はテキストカーソルにする */
.ov-note .nb{display:block;outline:none;min-width:1em;white-space:pre-wrap;}
.ov-note.selected{border-style:solid;border-color:var(--accent);background:rgba(255,255,255,.94);cursor:auto;
  box-shadow:0 2px 10px rgba(47,95,215,.25);}
.ov-note.selected .nb{cursor:text;}
/* 操作バー(Ａ−／Ａ＋／✥)。ホバー中と選択中は出しっぱなしにする(連続してサイズ調整できるように)。
   padding-topで本体との隙間を埋める(隙間があるとボタンへ動かす途中でhoverが切れて消えてしまう) */
.ov-note .note-size{position:absolute;left:0;top:100%;padding-top:6px;display:none;gap:4px;}
.ov-note:hover .note-size,.ov-note.selected .note-size{display:flex;}
.ov-note .note-size button{border:1px solid var(--line);background:#fff;border-radius:6px;font-size:11.5px;
  padding:3px 7px;cursor:pointer;color:var(--text);box-shadow:0 2px 6px rgba(0,0,0,.12);line-height:1;}
.ov-note .note-size button:hover{border-color:var(--accent);color:var(--accent-dark);}
.ov-note .note-size .grip{cursor:move;font-size:12.5px;}
/* 承認欄は最大3枠(担当印・課長印・部長印)。不要な印は薄く「不要」表示にする */
.approve-box{display:flex;gap:10px;}
.a-slot{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:12px 8px;text-align:center;background:#FAFBFE;}
.a-slot .t{font-size:12px;color:var(--muted);margin-bottom:10px;font-weight:600;}
.a-slot img{width:54px;height:54px;object-fit:contain;}
.a-slot .seal.empty,.a-slot .seal.na{width:54px;height:54px;font-size:12px;}
.a-slot .who{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.5;}
.a-slot.done{border-color:#F3C9C7;background:#FFFBFB;}
.a-slot.na{background:#F7F8FB;border-style:dashed;opacity:.6;}
.seal.na{display:inline-flex;align-items:center;justify-content:center;border:1.5px dashed #C6CADB;color:#AEB3C4;
  border-radius:50%;font-weight:700;background:transparent;line-height:1;font-family:"Hiragino Mincho ProN",serif;}
/* 承認ルート(2段/3段)の切り替え */
.route-pick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:9px 12px;
  background:#F5F7FC;border:1px solid var(--line);border-radius:9px;font-size:12.5px;color:var(--muted);}
.route-pick span{font-weight:600;color:var(--text);}
.route-pick label{display:flex;align-items:center;gap:5px;cursor:pointer;}
.route-pick input{width:auto;margin:0;}
.kv{font-size:13.5px;}
.kv dt{color:var(--muted);font-size:12px;margin-top:12px;}
.kv dd{margin-top:3px;font-weight:600;}
.kv dd.big{font-size:20px;font-weight:800;}
.flow{display:flex;align-items:center;gap:6px;font-size:11.5px;margin-top:12px;flex-wrap:wrap;}
.flow .st{padding:3px 10px;border-radius:10px;background:#EDEFF5;color:#9AA0B5;font-weight:600;}
.flow .st.done{background:#E8F0FE;color:var(--accent-dark);}
.flow .st.now{background:var(--accent);color:#fff;}
.flow .ar{color:#C6CADB;}

/* ===== 登録 ===== */
/* 請求書を読みながら入力できるよう、プレビュー側を広く取る */
.reg-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start;}
.reg-grid > *,.detail-grid > *{min-width:0;}   /* 中身の幅で列が押し広げられないようにする */
.reg-form-panel{position:sticky;top:72px;}
.folder-note{font-size:12px;color:var(--muted);background:#FAFBFE;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-top:10px;line-height:1.8;}
.folder-note code{color:var(--accent-dark);font-weight:700;}

#preview-box{margin-top:12px;}
.preview-bar{display:flex;align-items:center;gap:2px;flex-wrap:wrap;background:var(--navy);border-radius:8px 8px 0 0;padding:5px 8px;font-size:12.5px;}
.preview-bar button, .preview-bar a{background:transparent;border:none;color:#DDD;padding:5px 9px;border-radius:6px;cursor:pointer;font-family:inherit;font-size:12.5px;white-space:nowrap;text-decoration:none;}
.preview-bar button:hover, .preview-bar a:hover{background:rgba(255,255,255,.14);}
.preview-bar button:disabled{cursor:default;color:#fff;font-weight:600;}
.preview-bar .sep{width:1px;height:16px;background:rgba(255,255,255,.22);margin:0 6px;}
/* flexで中央寄せすると拡大時に左側がスクロールで届かなくなるため、block+margin autoにする */
.preview-scroll{border:1px solid var(--line);border-top:none;border-radius:0 0 8px 8px;background:#5A5D6E;
  max-height:72vh;overflow:auto;padding:12px;}
#reg-preview{display:block;margin:0 auto;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.3);max-width:none;}

/* ===== 設定 ===== */
.set-row{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid #F0F1F7;}
.set-row:last-child{border-bottom:none;}
.set-row .t{font-weight:700;font-size:14px;}
.set-row .d{font-size:12.5px;color:var(--muted);margin-top:3px;}
.set-row .right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.keymask{font-family:monospace;background:#F1F3F9;padding:5px 10px;border-radius:6px;font-size:13px;color:#555;}

/* ===== 書類ビューア(一覧から拡大表示) ===== */
.thumb-btn{border:none;background:transparent;padding:0;cursor:zoom-in;display:block;line-height:0;border-radius:4px;}
.thumb-btn:hover{outline:2px solid var(--accent);outline-offset:1px;}
/* 背面の一覧が少し見えるモーダル形式(全画面にしない) */
.viewer{position:fixed;inset:0;z-index:100;background:rgba(18,18,28,.6);
  display:flex;align-items:center;justify-content:center;padding:20px;}
.viewer-panel{width:min(90vw,1500px);height:90vh;background:var(--navy);border-radius:14px;
  overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.55);}
.viewer-bar{display:flex;align-items:center;gap:14px;padding:10px 16px;background:var(--navy);color:#EEE;flex-wrap:wrap;}
.viewer-title{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1;flex-wrap:wrap;}
.viewer-title b{font-size:15px;color:#fff;}
.viewer-sub{font-size:13px;color:#A9AEC4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:340px;}
.viewer-amount{font-size:16px;font-weight:800;color:#fff;}
.viewer-title .badge,.viewer-title span:last-child{font-size:12px;}
.viewer-tools{display:flex;align-items:center;gap:2px;flex-wrap:wrap;}
.viewer-tools button,.viewer-tools a{background:transparent;border:none;color:#DDD;padding:6px 10px;border-radius:6px;
  cursor:pointer;font-family:inherit;font-size:12.5px;white-space:nowrap;text-decoration:none;}
.viewer-tools button:hover,.viewer-tools a:hover{background:rgba(255,255,255,.14);}
.viewer-tools button:disabled{cursor:default;color:#fff;font-weight:600;}
/* 選択中の表示モード(全体/幅に合わせる)を分かるようにする */
.viewer-tools button.on{background:rgba(255,255,255,.2);color:#fff;font-weight:600;}
.viewer-tools .sep{width:1px;height:16px;background:rgba(255,255,255,.22);margin:0 6px;}
#v-close{font-size:16px;padding:5px 11px;}
#v-close:hover{background:var(--red);color:#fff;}
.viewer-body{flex:1;display:flex;align-items:stretch;min-height:0;}
.viewer-stage{flex:1;overflow:auto;padding:16px;min-width:0;background:#5A5D6E;}
.viewer-stage canvas{display:block;margin:0 auto;background:#fff;box-shadow:0 8px 32px rgba(0,0,0,.5);}
.viewer-nav{width:56px;border:none;background:transparent;color:rgba(255,255,255,.55);font-size:38px;
  cursor:pointer;flex-shrink:0;line-height:1;}
.viewer-nav:hover{background:rgba(255,255,255,.1);color:#fff;}
.viewer-msg{color:#DDD;text-align:center;padding:60px 20px;line-height:2;font-size:14px;}
.viewer-file{font-size:16px;color:#fff;margin-bottom:8px;word-break:break-all;}
.viewer-foot{display:flex;align-items:center;gap:16px;padding:8px 18px;background:var(--navy);
  color:#A9AEC4;font-size:12.5px;}
.viewer-hint{margin-left:auto;}
@media (max-width:900px){
  .viewer{padding:8px;}
  .viewer-panel{width:96vw;height:94vh;}
  .viewer-nav{width:36px;font-size:28px;}
  .viewer-sub{max-width:140px;}
  .viewer-hint{display:none;}
}

/* ===== 関連資料 ===== */
.att-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.att-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;position:relative;}
.att-card:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(79,142,247,.18);}
.att-thumb{display:flex;align-items:center;justify-content:center;height:116px;background:#FAFBFE;border-bottom:1px solid var(--line);overflow:hidden;padding:5px;}
.att-thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:#fff;}
.att-icon{font-size:30px;}
.att-body{padding:8px 9px 9px;}
.att-name{font-size:12px;font-weight:600;margin-top:5px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all;}
.att-note{font-size:11.5px;color:var(--accent-dark);margin-top:3px;}
.att-meta{font-size:11px;color:var(--muted);margin-top:4px;}
.att-del{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;border:none;
  background:rgba(30,30,46,.55);color:#fff;font-size:13px;line-height:1;cursor:pointer;display:none;}
.att-card:hover .att-del{display:block;}
.att-del:hover{background:var(--red);}

/* ===== マイ電子印 ===== */
.stamp-preview{width:120px;height:120px;border:1px solid var(--line);border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;}
.stamp-preview img{max-width:100px;max-height:100px;}

/* ===== スマホ用ヘッダーとドロワー ===== */
/* PCでは出さない。サイドバーは常時表示のまま */
.mobile-bar{display:none;}
.drawer-veil{display:none;}
.drawer-only{display:none;}
.mobile-title{display:none;}

@media (max-width: 900px){
  /* サイドバーは畳まずに完全に隠し、本文に全幅を使う(64pxのアイコン列は幅を奪うだけで分かりにくい) */
  .mobile-bar{display:flex;align-items:center;gap:10px;padding:0 12px;height:52px;
    background:var(--navy);position:sticky;top:0;z-index:60;}
  .mb-menu{background:transparent;border:none;color:#fff;font-size:20px;line-height:1;
    padding:8px 6px;cursor:pointer;min-width:40px;min-height:40px;}
  /* 指で押せる高さを確保する(文字の高さだけだと21pxしかない) */
  /* flexにすると b と span の間の空白が消えるので gap で空ける */
  .mb-logo{display:flex;align-items:center;gap:5px;min-height:44px;padding:0 4px;
    font-size:15px;color:#fff;font-weight:300;text-decoration:none;}
  .mb-logo:hover{opacity:.85;}
  .mb-logo b{font-weight:800;color:#7DB2FF;}
  .mb-avatar{margin-left:auto;width:30px;height:30px;border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;}
  .drawer-veil{display:block;position:fixed;inset:0;background:rgba(18,18,28,.5);z-index:70;}
  /* hidden属性より class セレクタが強いので、閉じている間は明示的に消す */
  .drawer-veil[hidden]{display:none;}

  #app{display:block;}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:264px;height:100vh;z-index:80;
    transform:translateX(-100%);transition:transform .22s ease;overflow-y:auto;}
  .sidebar.open{transform:translateX(0);}
  .drawer-only{display:block;}
  .drawer-me{padding:4px 20px 10px;font-size:13.5px;color:#fff;}
  .drawer-me .sub{font-size:12px;color:#9AA0B8;margin-top:2px;}
  .topbar{display:none;}          /* 画面名は本文側に出す(ヘッダーは横幅が足りない) */
  .mobile-title{display:block;font-size:18px;font-weight:800;margin-bottom:14px;}
  .content{padding:14px 13px 60px;}

  .cards{grid-template-columns:repeat(2,1fr);gap:8px;}
  .card{padding:12px 13px;}
  .card .v{font-size:19px;}
  .detail-grid,.reg-grid{grid-template-columns:1fr;}
  .content > div[style*="grid-template-columns:1.4fr"]{display:block!important;}
  .pdf-stage{padding:10px;min-height:280px;}
  .preview-scroll{padding:8px;}

  /* ---- 一覧: テーブルをカードに組み替える(9列は入りきらないため) ---- */
  .inv-table,.inv-table tbody,.inv-table td{display:block;width:auto;}
  .inv-table thead{display:none;}
  /* PCは「請求日→取引先」の並びだが、カードでは取引先を見出しにしたい。
     flexのorderで並べ替える(HTMLの順序はPCの表に合わせてあるため) */
  .inv-table tr{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;
    background:#fff;border:1px solid var(--line);border-radius:12px;
    padding:11px 12px 11px 56px;margin-bottom:8px;min-height:70px;}
  .inv-table .c-dept{order:1;flex-basis:100%;}
  .inv-table .c-partner{order:2;flex-basis:100%;}
  .inv-table .c-amount{order:3;}
  .inv-table .c-issue{order:4;}
  .inv-table .c-due{order:5;}
  .inv-table .c-seal{order:6;flex-basis:100%;}
  .inv-table tr:hover td{background:transparent;}
  .inv-table td{border:none;padding:0;}
  /* サムネイルは左に固定配置。チェックは右上に離して重なりを防ぐ */
  .inv-table .c-thumb{position:absolute;left:12px;top:13px;}
  .inv-table .c-check{position:absolute;right:12px;top:11px;z-index:2;}
  .inv-table .c-check input{width:18px;height:18px;}
  .inv-table .c-dept{margin-bottom:4px;}
  .inv-table .c-partner{font-size:14.5px;line-height:1.4;padding-right:26px;}
  .inv-table .c-sub{font-size:12.5px;color:var(--muted);margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .inv-table .c-amount{text-align:left!important;font-size:17px;margin-top:6px;display:inline-block;}
  .inv-table .c-issue{display:inline-block;font-size:12.5px;color:var(--muted);margin-left:8px;}
  .inv-table .c-issue::before{content:"請求日 ";}
  .inv-table .c-due{display:inline-block;font-size:12.5px;color:var(--muted);margin-left:8px;}
  .inv-table .c-due::before{content:"期限 ";}
  .inv-table .c-status{position:absolute;right:12px;bottom:11px;}
  .inv-table .c-seal{margin-top:7px;}
  .inv-table .c-report{display:none;}   /* 報告済みはステータス側に出るので省く */
  .inv-table td[colspan]{padding:24px 0;text-align:center;color:var(--muted);flex-basis:100%;}

  /* 絞り込みは2列。検索とボタンは全幅で押しやすく */
  .filter,select.filter{width:100%;}
  .scope-filter{max-width:none;}
  .tabs{width:100%;}
  .tab{flex:1;text-align:center;padding:9px 6px;}
}
@media (max-width: 600px){
  /* スマホは入力欄を1列に。iOSのズーム発動(16px未満)を避けたサイズと押しやすいボタン */
  .form-2col{grid-template-columns:1fr;}
  #inv-edit input,#inv-edit select{font-size:17px;padding:11px 12px;}
  #inv-edit .btn{min-height:44px;}
}

/* 社内メモ(報告メールには載らない社内向けの申し送り) */
.memo-mark{margin-left:4px;cursor:help;font-size:13px;opacity:.75;}
.memo-box{white-space:pre-wrap;background:#F7F8FB;border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;font-size:13px;line-height:1.8;font-weight:400;}

/* ===== 画面の見出し(いま何を見ているか・件数と合計) ===== */
.page-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:16px;flex-wrap:wrap;}
.page-head .ph-main{min-width:0;}
.page-head h2{font-size:18px;font-weight:800;letter-spacing:.2px;line-height:1.3;}
.page-head .ph-cond{font-size:12.5px;color:var(--muted);margin-top:5px;}
.page-head .ph-count{margin-left:auto;font-size:14px;color:var(--muted);white-space:nowrap;line-height:1.2;}
.page-head .ph-count b{color:var(--text);font-weight:800;font-size:22px;letter-spacing:.2px;}

/* 部署の絞り込み。月やステータスより広い範囲を指すので、自部署以外のときは色で示す */
.scope-filter{max-width:230px;}
.scope-filter.other{border-color:var(--accent);background:#F5F8FF;color:var(--accent-dark);font-weight:600;}

@media (max-width: 600px){
  .page-head{gap:8px;}
  .page-head .ph-count{margin-left:0;}
}

/* ===== 一覧の操作エリア ===== */
/* 一覧の操作エリアは3段に分ける。
   ①タブ=どの帳簿を見るか ②検索=絞り込む ③操作=選んだ行に対して実行する。
   種類の違う操作を同じ行に並べると、どれが何なのか区別できなくなる */
.tab-row{margin-bottom:12px;}
/* 閉じているときは絞り込み欄と同じ高さに揃える(stretch)。開くと折り返して1行使う */
.search-area{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;margin-bottom:12px;}
.search-box{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;}
.search-box .lead{font-size:12.5px;color:var(--muted);font-weight:700;padding:0 2px;white-space:nowrap;}
.act-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.act-row .spacer{margin-left:auto;}   /* ここから右は「新しく作る」操作 */
/* 削除は右端。新規登録のすぐ隣だと押し間違えるので少し離す */
.act-row .act-last{margin-left:10px;}

@media (max-width: 900px){
  .list-tools{display:block;}
  .list-tools .tabs{margin-bottom:10px;}
  .search-area{display:block;}
  .search-box{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;padding:10px;}
  .search-box .lead{display:none;}
  .search-box .filter{min-height:40px;}
  .search-box .filter[name="status"],.search-box .filter[name="kw"],
  .search-box .filter[name="view"]{grid-column:1 / -1;}
  .act-row{display:flex;flex-wrap:wrap;gap:8px;}
  .act-row .btn{flex:1;min-height:42px;justify-content:center;}
  .act-row .spacer{display:none;}
  .act-row a.btn.sm[href*="register.php"]{flex-basis:100%;}
  .act-row .act-last{margin-left:0;flex-basis:100%;}   /* スマホでは削除を独立した行に */
  .range-box{margin-bottom:10px;}
  /* 部署と月を2列、ステータスと検索は全幅。指で押しやすい高さにする */
  .list-filters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;}
  .list-filters .filter{min-height:40px;}
  .list-filters .filter[name="status"],.list-filters .filter[name="kw"]{grid-column:1 / -1;}
  /* 新規登録だけを目立たせ、他は下段に小さくまとめる(誤タップ防止) */
  .list-actions{margin-left:0;display:flex;flex-wrap:wrap;gap:8px;}
  .list-actions .btn{flex:1;min-height:42px;justify-content:center;}
  .list-actions a.btn.sm[href*="register.php"]{flex-basis:100%;}
}

/* ---- 期間・金額のしぼり込み(電帳法の検索要件) ----
   普段は畳んでおき、必要なときだけ開く。開いていると分かるよう枠色を変える */
.range-box{border:1px solid var(--line);border-radius:10px;background:#fff;margin:0;overflow:hidden;
  flex:1 1 300px;min-width:0;display:flex;flex-direction:column;}
.range-box .range-toggle{flex:1 0 auto;}   /* 隣の絞り込み欄の高さまで伸ばす */
.range-box.open{flex-basis:100%;}   /* 開いたら折り返して1行使う(入力欄が窮屈にならない) */
.range-box.open{border-color:#C9D6F5;box-shadow:0 1px 6px rgba(47,95,215,.08);}
.range-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;border:0;background:#FAFBFE;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;text-align:left;}
.range-toggle:hover{background:#F4F7FF;color:var(--accent-dark);}
.range-box.open .range-toggle{background:#F4F7FF;color:var(--accent-dark);}
.range-on{font-size:11.5px;font-weight:700;color:#fff;background:var(--accent);border-radius:9px;padding:2px 8px;}
.range-caret{margin-left:auto;transition:transform .15s;}
.range-box.open .range-caret{transform:rotate(180deg);}
.range-form{display:none;padding:14px;border-top:1px solid var(--line);}
.range-box.open .range-form{display:block;}
.range-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.range-label{font-size:12.5px;font-weight:700;color:var(--muted);width:74px;flex:none;}
.range-sep{font-size:12.5px;color:var(--muted);}
.filter.dt{width:158px;}
.filter.num{width:120px;text-align:right;}
.range-presets{display:flex;gap:5px;margin-left:6px;}
.range-chip{border:1px solid var(--line);background:#fff;border-radius:20px;padding:4px 12px;
  font-family:inherit;font-size:12px;color:var(--muted);cursor:pointer;}
.range-chip:hover{border-color:var(--accent);color:var(--accent-dark);background:#F4F7FF;}
.range-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:4px;}
.range-note{font-size:11.5px;color:var(--muted);}

@media (max-width: 900px){
  .range-row{display:block;}
  .range-label{width:auto;display:block;margin-bottom:5px;}
  .filter.dt,.filter.num{width:100%;min-height:40px;margin-bottom:6px;}
  .range-sep{display:block;margin:-2px 0 4px;}
  .range-presets{margin:0 0 4px;}
  .range-chip{flex:1;min-height:36px;}
  .range-foot .btn{flex:1;min-height:42px;justify-content:center;}
  .range-note{flex-basis:100%;}
}
.range-warn{margin-top:10px;background:#FFF9EC;border:1px solid #F3E3BC;color:#8A6D1F;
  font-size:12px;border-radius:8px;padding:8px 12px;line-height:1.7;}
.range-warn a{margin-left:6px;font-weight:700;text-decoration:underline;}

/* 経理へ引き渡し済みのロック表示。禁止ではなく「どうすれば直せるか」まで見せる */
.lock-bar{background:#EFF1F7;border:1px solid #D6DAE8;color:#4A5068;font-size:12.5px;
  border-radius:8px;padding:11px 14px;margin-bottom:16px;line-height:1.85;}
.lock-bar .sub{display:block;font-size:11.5px;color:var(--muted);}

/* 複数ページの書類で「印や書き込みがどのページにあるか」を示すバッジ。押すとそのページへ */
.pg-jump{display:inline-block;margin-top:4px;border:1px solid #C9D6F5;background:#F4F7FF;color:var(--accent-dark);
  border-radius:20px;padding:2px 9px;font-size:11px;font-weight:700;font-family:inherit;cursor:pointer;}
.pg-jump:hover{background:var(--accent);color:#fff;border-color:var(--accent);}

/* 入力欄ごとの注意書き。請求日が読み取れなかったときなど、その場で気づけるように */
.field-warn{background:#FFF9EC;border:1px solid #F3E3BC;color:#8A6D1F;
  font-size:11.5px;line-height:1.7;border-radius:7px;padding:7px 10px;margin-top:6px;}
input.needs-check{border-color:var(--orange)!important;background:#FFFDF7;}

/* 並べ替えできる見出し。押す前から薄いアイコンを出して「並べ替えられる」と分かるようにする */
.th-sort{display:inline-block;color:var(--muted);text-decoration:none;white-space:nowrap;}
.th-sort:hover{color:var(--accent-dark);}
.th-sort.on{color:var(--accent-dark);font-weight:700;}
.th-sort .s-ico{margin-left:4px;font-size:11px;color:#C3C8D8;letter-spacing:0;}
.th-sort:hover .s-ico{color:var(--accent);}
.th-sort.on .s-ico{color:var(--accent-dark);font-size:10px;}
/* 取引先の下に添える品目・社内メモ(独立した列をやめて幅を空けた) */
td.c-partner .c-sub{font-size:12px;color:var(--muted);font-weight:400;margin-top:2px;line-height:1.5;}