/* app.css — 実データ版UI（メンバー画面 / 管理者画面）共通スタイル */
:root{
  --primary:#3182ce; --primary-dark:#1e3a5f; --border:#e2e8f0; --text:#1a202c;
  --muted:#718096; --bg:#f5f7fb; --green:#2f855a; --orange:#c05621; --red:#c53030;
  --soft:#f0f5ff;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Noto Sans JP',system-ui,sans-serif;background:var(--bg);color:var(--text);}
.topbar{background:white;border-bottom:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;}
.brand{font-weight:700;color:var(--primary-dark);font-size:16px;display:flex;align-items:center;gap:8px;}
.brand .tag{font-size:11px;background:var(--soft);color:var(--primary);border-radius:6px;padding:2px 8px;font-weight:600;}
.brand .tag.admin{background:#fef5e7;color:#975a16;}
.brand .tag.build{background:#edf2f7;color:var(--muted);font-weight:500;}
/* メンバー表示で確認中。ふだんの画面と一目で区別できるよう、強い色にする */
.brand .tag.preview{background:#3f4bab;color:#fff;font-weight:700;}
.who{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:12px;}
.navlink{font-size:12px;color:var(--primary);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:4px;}
.wrap{max-width:1000px;margin:0 auto;padding:24px 20px 80px;}
.card{background:white;border:1px solid var(--border);border-radius:12px;padding:22px;margin-bottom:18px;}
.card h2{font-size:15px;font-weight:700;color:var(--primary-dark);margin:0 0 14px;display:flex;align-items:center;gap:8px;}
.card h2 .n{width:24px;height:24px;border-radius:50%;background:var(--primary);color:white;display:inline-flex;align-items:center;justify-content:center;font-size:13px;}
label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px;}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;background:white;}
.inline-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.inline-controls > div{flex:1;min-width:150px;}
.btn{display:inline-flex;align-items:center;gap:6px;border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;}
.btn-primary{background:var(--primary);color:white;}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;}
.btn-secondary{background:#edf2f7;color:var(--primary-dark);}
.btn-approve{background:var(--green);color:white;padding:6px 12px;font-size:13px;}
.btn-danger{background:#fff5f5;color:var(--red);border:1px solid #fed7d7;}
.btn-danger:disabled{opacity:.5;cursor:not-allowed;}
/* 行内の削除など、普段は主張させたくない操作 */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:6px;background:transparent;color:#a0aec0;cursor:pointer;font-family:inherit;transition:.12s;}
.icon-btn:hover{background:#fff5f5;color:var(--red);}
.icon-btn:focus-visible{outline:2px solid var(--red);outline-offset:1px;}
.icon-btn:disabled{opacity:.35;cursor:not-allowed;}
.icon-btn:disabled:hover{background:transparent;color:#a0aec0;}
.btn-sm{padding:6px 12px;font-size:13px;}
.material-symbols-outlined{font-variation-settings:'opsz' 20;vertical-align:middle;}
.icon-inline{font-size:18px;margin-right:2px;}
.banner{border-radius:8px;padding:12px 14px;font-size:13px;margin-bottom:18px;display:flex;gap:8px;align-items:flex-start;}
.banner.info{background:#ebf8ff;border:1px solid #bee3f8;color:#2c5282;}
.banner.warn{background:#fffaf0;border:1px solid #fbd38d;color:#975a16;}
.banner.err{background:#fff5f5;border:1px solid #fed7d7;color:#c53030;}
.banner.ok{background:#f0fff4;border:1px solid #c6f6d5;color:#276749;}
.drop{border:2px dashed #cbd5e0;border-radius:10px;padding:26px;text-align:center;color:var(--muted);background:#fafbfc;cursor:pointer;transition:.15s;}
.drop:hover,.drop.hot,.drop.is-over{border-color:var(--primary);background:var(--soft);}
.drop.is-over{border-style:solid;}
.drop.busy{cursor:progress;opacity:.65;pointer-events:none;}
/* 共通の受け口（js/dropzone.js）。押して選ぶ・落とす、どちらでも同じ */
.dz{border:2px dashed #cbd5e0;border-radius:10px;padding:16px 14px;text-align:center;color:var(--muted);background:#fafbfc;cursor:pointer;transition:.15s;font-size:12.5px;line-height:1.7;}
.dz:hover,.dz:focus-visible,.dz.is-over{border-color:var(--primary);background:var(--soft);color:var(--primary);outline:none;}
.dz.is-over{border-style:solid;}
.dz .dz-main{font-weight:600;color:var(--text);font-size:13px;}
.dz.is-over .dz-main{color:var(--primary);}
.dz .dz-sub{font-size:11.5px;color:var(--muted);margin-top:2px;}
.dz.sm{padding:11px 12px;}
.dz.busy{cursor:progress;opacity:.65;pointer-events:none;}
.dz-log{font-size:12px;margin-top:6px;white-space:pre-line;}
.dz-log.ng{color:#c53030;}
.steps{display:flex;gap:6px;margin:14px 0 0;flex-wrap:wrap;}
.step{font-size:12px;padding:5px 10px;border-radius:20px;background:#edf2f7;color:var(--muted);display:flex;align-items:center;gap:5px;}
.step.active{background:var(--primary);color:white;}
.step.done{background:#c6f6d5;color:#276749;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{padding:10px 8px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;}
th{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;}
.pill{display:inline-block;border-radius:6px;padding:2px 8px;font-size:11px;font-weight:600;white-space:nowrap;}
.pill.draft,.pill.uploaded,.pill.recognizing{background:#fef5e7;color:#975a16;}
.pill.approved,.pill.ready,.pill.classified{background:#e6fffa;color:#234e52;}
.pill.sent,.pill.filed{background:#c6f6d5;color:#276749;}
.pill.rejected,.pill.error{background:#fed7d7;color:#c53030;}
/* 書類種別バッジ */
.dt{display:inline-block;border-radius:6px;padding:2px 8px;font-size:11px;font-weight:600;background:#edf2f7;color:#4a5568;white-space:nowrap;}
.dt.invoice{background:#ebf8ff;color:#2c5282;}
.dt.receipt{background:#f0fff4;color:#276749;}
.dt.bank,.dt.card{background:#faf5ff;color:#553c9a;}
.dt.salary,.dt.tax{background:#fffaf0;color:#975a16;}
.dt.contract,.dt.quote,.dt.certificate{background:#fff5f5;color:#9b2c2c;}
.conf{font-size:11px;font-weight:700;}
.conf.high{color:var(--green);} .conf.mid{color:var(--orange);} .conf.low{color:var(--red);}
.tabs{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap;}
.tab{padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);background:#edf2f7;}
.tab.active{background:var(--primary);color:white;}
.muted{color:var(--muted);}
.empty{padding:28px;text-align:center;color:var(--muted);}
.row-actions{white-space:nowrap;}
.hidden{display:none;}
.lines{font-size:12px;color:var(--muted);margin-top:4px;}
.err-text{color:var(--red);font-size:13px;margin-top:8px;}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.kpi{background:#fafbfc;border:1px solid var(--border);border-radius:10px;padding:14px;}
.kpi .k{font-size:11px;color:var(--muted);font-weight:600;}
.kpi .v{font-size:20px;font-weight:700;color:var(--primary-dark);margin-top:4px;}

/* =============================================================================
   スマートフォン対応
   要件「メンバー画面はスマホ優先」に対応。既存クラスへ後から効かせるため末尾に置く。
   このファイルは元々80行で @media が1件も無く、.wrap は max-width:1000px 固定、
   .topbar は折り返し指定なし、表は横スクロール枠なしだった。
   ============================================================================= */

/* 表は必ず自前の横スクロール枠に入れ、ページ本体が横に伸びないようにする。
   新規画面は .table-scroll で囲む。既存3画面は表の親が id 指定なのでそれも拾う。 */
.table-scroll,
#doc-list, #journal-list, #tb-result {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 720px) {
  body { font-size: 14px; }

  .topbar { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
  .brand  { font-size: 15px; }
  .who    { font-size: 11px; gap: 10px; flex-wrap: wrap; }

  .wrap    { padding: 16px 14px 72px; }
  .card    { padding: 16px 14px; border-radius: 10px; }
  .card h2 { font-size: 14px; }

  /* 横並びの絞り込みコントロールを縦積みにする（min-width:150px で潰れるため） */
  .inline-controls        { flex-direction: column; align-items: stretch; gap: 10px; }
  .inline-controls > div  { min-width: 0; width: 100%; }

  table   { font-size: 12.5px; }
  th, td  { padding: 8px 6px; }

  .tabs { gap: 6px; }
  .tab  { padding: 7px 11px; font-size: 12px; }

  .drop { padding: 20px 14px; }
}

/* 指で操作する端末ではタップ領域を確保する */
@media (pointer: coarse) {
  .btn      { min-height: 44px; }
  .btn-sm   { min-height: 38px; }
  .icon-btn { min-width: 40px; min-height: 40px; }
}

textarea{resize:vertical;line-height:1.8;}

/* ロゴマーク。
   差し替えは img/logo.svg を置き換えるだけで、画面側の変更は要らない。
   layout.css を読まない画面（app.html / admin.html / index.html）でも
   効くように、こちらに置いてある */
.kp-logo {
  width: 22px; height: 22px;
  vertical-align: -5px; margin-right: 7px;
  flex: none;
}

/* ===========================================================================
   タスクの引き出し（右から出る詳細）
   ---------------------------------------------------------------------------
   一覧は「探す場所」、引き出しは「処理する場所」。
   行を押しても別の画面へ飛ばさず、背面の一覧はそのまま残す。

   PCは右から板が出る。スマホは下から（狭い画面で右から細い板が出ても読めない）
   =========================================================================== */
.td-root { position: fixed; inset: 0; z-index: 60; }
.td-root.hidden { display: none; }
.td-back { position: absolute; inset: 0; background: rgba(20, 24, 32, .38); }
.td-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(460px, 94vw); background: #fff;
  box-shadow: -2px 0 20px rgba(20, 24, 32, .16);
  display: flex; flex-direction: column;
  animation: td-in .18s ease-out;
}
@keyframes td-in { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
body.td-open { overflow: hidden; }

.td-head { display: flex; align-items: flex-start; gap: 10px;
           padding: 16px 18px 12px; border-bottom: 1px solid var(--border); }
.td-head .td-ti { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; color: var(--primary-dark);
                  line-height: 1.6; }
.td-x { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0; line-height: 1; }

/* いちばんよく変えるものを、上に4つ */
.td-top { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; padding: 13px 18px; }
.td-f label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.td-f select, .td-f input { margin: 0; font-size: 13px; width: 100%; }

.td-act { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 18px 13px; }

.td-ai { margin: 0 18px 13px; border: 1px solid #e2c88a; border-radius: 10px;
         background: #fffdf7; padding: 11px 13px; }
.td-ai b { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: #975a16; }
.td-ai b .material-symbols-outlined { font-size: 17px; }
.td-ai .tx { font-size: 12.5px; line-height: 1.9; margin-top: 5px; }
.td-ai .bt { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }

.td-tabs { display: flex; gap: 4px; padding: 0 18px; border-bottom: 1px solid var(--border); }
.td-tabs button { border: 0; background: none; cursor: pointer; font-family: inherit;
                  font-size: 13px; font-weight: 600; color: var(--muted);
                  padding: 9px 12px; border-bottom: 2px solid transparent; }
.td-tabs button.on { color: var(--primary-dark); border-bottom-color: var(--primary); }

.td-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.td-load, .td-empty { color: var(--muted); font-size: 13px; padding: 18px 0; }
.td-lead { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.8; }

.td-row { margin-bottom: 11px; }
.td-row label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.td-row input, .td-row textarea, .td-row select { margin: 0; font-size: 13px; width: 100%; }

.td-meta { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px;
           font-size: 12px; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.td-meta dt { color: var(--muted); white-space: nowrap; }
.td-meta dd { margin: 0; }

.td-c { border-bottom: 1px solid var(--border); padding: 9px 0; }
.td-c:last-child { border-bottom: 0; }
.td-c .w { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.td-c .w span { font-weight: 400; margin-left: 7px; }
.td-c .b { font-size: 13px; line-height: 1.85; margin-top: 3px; white-space: pre-wrap; }
.td-c.mine .b { color: var(--primary-dark); }
.td-cin { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px;
          padding-top: 12px; border-top: 1px solid var(--border); }
.td-cin textarea { flex: 1; margin: 0; font-size: 13px; }

.td-h { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.td-h:last-child { border-bottom: 0; }
.td-h .k { flex: 0 0 66px; font-size: 11px; color: var(--muted); font-weight: 600; padding-top: 2px; }
.td-h .b .t { font-size: 13px; line-height: 1.75; }
.td-h .b .w { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.td-cbt { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 6px; }

/* スマホは下から。右から細い板が出ても読めない */
@media (max-width: 760px) {
  .td-panel {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; height: 90vh;
    border-radius: 16px 16px 0 0;
    animation: td-up .2s ease-out;
  }
  @keyframes td-up { from { transform: translateY(30px); opacity: .7; } to { transform: none; opacity: 1; } }
  .td-top { grid-template-columns: 1fr 1fr; }
}