/* =========================================================================
 *  社内ポータル 各種申請フォーム 共通スタイル
 *  （経費精算 / 交通費精算 などで共用）
 * ========================================================================= */
:root{
  --bg:#f4f6f9; --panel:#ffffff; --ink:#1f2733; --sub:#5b6572;
  --line:#e2e7ee; --line2:#eef1f6; --brand:#1f5eff; --brand-d:#1746c0;
  --ok:#0a9d55; --warn:#c47a00; --danger:#d23b3b; --danger-bg:#fdecec;
  --chip:#eef3ff; --shadow:0 1px 2px rgba(20,30,50,.06),0 8px 24px rgba(20,30,50,.06);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;
  font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--brand)}
.wrap{max-width:1080px; margin:0 auto; padding:24px 20px 90px}

/* ---- header ---- */
.apphead{display:flex; align-items:center; gap:12px; margin-bottom:18px}
.logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#5b8bff);
      display:grid;place-items:center;color:#fff;font-weight:700}
.apphead .t1{font-weight:700;font-size:15px}
.apphead .t2{color:var(--sub);font-size:12px}
.brandlink{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;border-radius:10px;padding:4px 6px;margin:-4px -6px;transition:background .12s}
.brandlink:hover{background:var(--line2)}
.crumb a{color:var(--brand-d);text-decoration:none;font-weight:600}
.crumb a:hover{text-decoration:underline}
.headright{margin-left:auto;display:flex;align-items:center;gap:14px}
.crumb{color:var(--sub);font-size:12px}
.userchip{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 12px 4px 4px;font-size:12px}
.userchip .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#5b8bff,#1f5eff);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.userchip .un{font-weight:600}
.userchip .ud{color:var(--sub)}

.titlebar{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:6px}
h1{font-size:22px;margin:0}
.badge{display:inline-block;font-size:12px;padding:2px 10px;border-radius:999px;background:var(--chip);color:var(--brand-d);font-weight:600}
.lead{color:var(--sub);margin:2px 0 18px}

/* ---- cards ---- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}
.card > h2{font-size:14px;margin:0;padding:14px 18px;border-bottom:1px solid var(--line2);
           display:flex;align-items:center;gap:8px;background:#fbfcfe}
.card > h2 .n{width:20px;height:20px;border-radius:6px;background:var(--brand);color:#fff;font-size:12px;display:grid;place-items:center}
.card > h2 .auto{margin-left:auto;font-weight:600;font-size:11px;color:var(--ok);background:#e7f6ee;border-radius:999px;padding:2px 10px}
.card .body{padding:18px}
.hint{color:var(--sub);font-size:12px;margin:0 18px 14px}

/* ---- form grid ---- */
.grid{display:grid;gap:14px 18px;grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid .full{grid-column:1/-1}
@media(max-width:680px){.grid,.grid.cols-3{grid-template-columns:1fr}}
label.f{display:block}
.lab{font-size:12px;color:var(--sub);font-weight:600;margin-bottom:5px;display:flex;gap:6px;align-items:center}
.req{color:var(--danger);font-weight:700}
.autotag{font-size:10px;font-weight:700;color:var(--brand-d);background:var(--chip);border-radius:4px;padding:1px 6px}
input,select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;
  font:inherit;color:inherit;transition:border-color .12s, box-shadow .12s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(31,94,255,.14)}
input[readonly]{background:#f3f5f8;color:var(--sub)}
textarea{resize:vertical;min-height:64px}

/* ---- line items ---- */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:920px}
th,td{padding:8px 8px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:middle}
thead th{background:#fbfcfe;font-size:12px;color:var(--sub);font-weight:600;white-space:nowrap;position:sticky;top:0}
tbody td input,tbody td select{padding:7px 8px}
td.num input{text-align:right}
td.center{text-align:center}
.rowdel{border:none;background:transparent;color:var(--danger);cursor:pointer;font-size:16px;line-height:1;padding:4px 8px;border-radius:6px}
.rowdel:hover{background:var(--danger-bg)}
.colw-date{width:120px}.colw-cat{width:150px}.colw-amt{width:120px}.colw-tax{width:96px}
.colw-del{width:76px}.colw-ops{width:104px}.colw-means{width:110px}.colw-trip{width:88px}
.file-mini{font-size:11px}
.mini{font-size:12px;color:var(--sub)}

/* 行の操作（複製・経路反転・削除）。T-30 */
.rowops{white-space:nowrap;text-align:center}
.rowbtn{border:none;background:transparent;color:var(--sub);cursor:pointer;font-size:14px;line-height:1;padding:4px 6px;border-radius:6px}
.rowbtn:hover{background:var(--chip);color:var(--brand-d)}
/* 複製元に証憑が付いていたときだけ出る注意書き */
.dupnote{color:var(--warn);margin-top:3px;line-height:1.35}
/* 定期区間に一致した行の目印（T-31）。運賃は減額されない */
.cmnote{font-size:10px;font-weight:700;color:var(--ok);background:#e7f6ee;
        border-radius:999px;padding:1px 6px;margin-top:4px;display:inline-block;white-space:nowrap}
/* 定期控除にチェックが入っているのに運賃が残っている行への注意。
   控除済みと申告しながら全額を請求するのを黙って通さないため */
.farewarn{font-size:10.5px;color:var(--warn);margin-top:4px;line-height:1.35}

/* 経路入力（出発 → 到着） */
.route{display:flex;align-items:center;gap:6px;min-width:220px}
.route .arw{color:var(--sub);font-size:13px;flex:0 0 auto}
.route input{min-width:80px}

/* その他フリー入力 */
.other-in{margin-top:5px}
.other-in.hidden{display:none}

.addrow{margin-top:12px;display:inline-flex;align-items:center;gap:7px;border:1px dashed var(--brand);
        color:var(--brand-d);background:var(--chip);padding:8px 14px;border-radius:9px;cursor:pointer;font-weight:600;font-size:13px}
.addrow:hover{background:#e3ecff}

/* ---- totals ---- */
.totals{display:flex;justify-content:flex-end;margin-top:14px}
.totbox{width:320px;max-width:100%;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.totbox .r{display:flex;justify-content:space-between;padding:8px 14px;font-size:13px;border-bottom:1px solid var(--line2)}
.totbox .r span:last-child{font-variant-numeric:tabular-nums}
.totbox .grand{background:#fbfcfe;font-weight:700;font-size:16px;border-bottom:none;color:var(--brand-d)}

/* ---- approval route ---- */
.routewrap{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:8px;align-items:end}
@media(max-width:820px){.routewrap{grid-template-columns:1fr;gap:12px}.routewrap .arrow{display:none}}
.arrow{color:var(--sub);font-size:20px;padding-bottom:9px;text-align:center}
.step-lab{font-size:11px;font-weight:700;color:var(--brand-d);background:var(--chip);border-radius:6px;padding:2px 8px;display:inline-block;margin-bottom:5px}
.step-lab.applicant{color:#555;background:#eef1f6}
.step-lab.final{color:#fff;background:var(--brand)}
.route-note{margin-top:10px;color:var(--sub);font-size:11.5px}

.levelnote{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#fbfcfe;font-size:13px}
.levelnote b{color:var(--brand-d)}
.pill{display:inline-block;padding:1px 9px;border-radius:999px;font-size:12px;font-weight:700;margin-left:6px}
.pill.B{background:#e7f6ee;color:var(--ok)} .pill.C{background:#fdf0dd;color:var(--warn)}

.callout{display:flex;gap:10px;background:#eef4ff;border:1px solid #cfe0ff;border-radius:10px;padding:12px 14px;font-size:12.5px;color:#274690;margin:0 18px 16px}
.callout .i{font-size:15px}

/* ---- actions ---- */
.actions{position:sticky;bottom:0;background:linear-gradient(#f4f6f9cc,#f4f6f9);backdrop-filter:blur(6px);
         border-top:1px solid var(--line);margin:0 -20px -90px;padding:14px 20px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:10px 18px;border-radius:10px;font:inherit;font-weight:600;cursor:pointer;transition:.12s}
.btn:hover{border-color:#cdd5e0}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-d)}
.btn.ghost{background:transparent}
.spacer{flex:1}
.status{font-size:12px;color:var(--sub)}

.errmsg{display:none;color:var(--danger);font-size:12px;margin-top:4px}
.invalid input,.invalid select{border-color:var(--danger);background:var(--danger-bg)}

/* ---- 確認モーダル ---- */
.modal-mask{position:fixed;inset:0;background:rgba(20,30,50,.5);display:none;align-items:flex-start;justify-content:center;z-index:100;overflow:auto;padding:28px 16px}
.modal-mask.show{display:flex}
.modal{background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:100%;max-width:820px;overflow:hidden}
.modal .mh{padding:16px 20px;border-bottom:1px solid var(--line2);background:#fbfcfe}
.modal .mh h2{font-size:17px;margin:0}
.modal .mh p{margin:2px 0 0;color:var(--sub);font-size:12.5px}
.modal .mb{padding:18px 20px;max-height:62vh;overflow:auto}
.modal .mf{padding:14px 20px;border-top:1px solid var(--line2);display:flex;gap:10px;justify-content:flex-end;background:#fbfcfe;position:sticky;bottom:0}
.cfm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 18px;margin-bottom:14px}
@media(max-width:560px){.cfm-grid{grid-template-columns:1fr}}
.cfm-grid .k{font-size:11px;color:var(--sub);font-weight:600}
.cfm-grid .v{font-size:14px;margin-bottom:4px}
.cfm-sec{font-size:12px;font-weight:700;color:var(--brand-d);margin:14px 0 6px}
.cfm-table{width:100%;border-collapse:collapse;font-size:12.5px}
.cfm-table th,.cfm-table td{padding:7px 9px;border-bottom:1px solid var(--line2);text-align:left}
.cfm-table th{background:#fbfcfe;color:var(--sub);font-size:11px;font-weight:600;white-space:nowrap}
.cfm-table td.amt,.cfm-table th.amt{text-align:right;font-variant-numeric:tabular-nums}
.cfm-total{display:flex;justify-content:flex-end;gap:14px;align-items:baseline;margin-top:10px;font-weight:700}
.cfm-total .big{font-size:20px;color:var(--brand-d)}
.cfm-route{font-size:13px;color:var(--ink);margin-top:4px}
.cfm-route .arw{color:var(--sub)}

/* =========================================================================
 *  スマートフォン対応（T-32）
 *
 *  明細テーブルは列が多く（交通費は11列）、横スクロールでは
 *  「日付を見ながら金額を入れる」ができない。狭い画面では1行を1枚の
 *  カードとして縦に積み、各セルの見出しを data-label から出す。
 *  テーブルの構造そのものは変えないので、入力値の収集・送信には影響しない。
 * ========================================================================= */
@media(max-width:720px){
  .wrap{padding:16px 14px 90px}

  /* ヘッダー。幅が足りず「社内ポー／タル」のように語中で折り返すのを防ぐ */
  .apphead{gap:8px;margin-bottom:14px}
  .apphead .t1{white-space:nowrap}
  .apphead .t2{display:none}
  .headright{gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .crumb{flex-basis:100%;text-align:right}
  /* 所属は畳んで氏名だけ残す（長い部署名でヘッダーが2段になるため） */
  .userchip{max-width:60vw;padding:3px 10px 3px 3px}
  .userchip .ud{display:none}
  .userchip .un{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .tablewrap{overflow-x:visible}
  #itemsTable{min-width:0}
  #itemsTable thead{display:none}
  #itemsTable, #itemsTable tbody, #itemsTable tr, #itemsTable td{display:block;width:auto}

  #itemsTable tr{
    border:1px solid var(--line);border-radius:10px;background:#fff;
    padding:6px 10px;margin-bottom:12px;position:relative;
  }
  #itemsTable td{
    border-bottom:1px solid var(--line2);padding:8px 0;
    display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center;
  }
  #itemsTable tr td:last-child{border-bottom:none}
  #itemsTable td::before{
    content:attr(data-label);
    font-size:11px;color:var(--sub);font-weight:600;line-height:1.4;
  }
  /* 見出しを持たないセル（行の操作ボタン）は横いっぱいに広げる */
  #itemsTable td:not([data-label]){grid-template-columns:1fr}
  #itemsTable td:not([data-label])::before{content:none}
  #itemsTable td.num input{text-align:left}
  #itemsTable td.center{text-align:left}
  #itemsTable .route{min-width:0}

  /* タップしやすい大きさを確保する。
     #itemsTable td の grid 指定を上書きするため同じ強さの指定にする */
  #itemsTable td.rowops{display:flex;gap:6px;justify-content:flex-end;padding-top:6px}
  .rowbtn,.rowdel{min-width:44px;min-height:44px;font-size:16px}
  #itemsTable input[type=checkbox]{width:22px;height:22px}
  .addrow{width:100%;justify-content:center;padding:12px 14px}

  .totals{margin-top:8px}
  .totbox{width:100%}
  /* 画面端まで広げる負のマージンは .wrap の padding と揃える必要がある
     （揃っていないと、その差ぶんだけ横スクロールが出る） */
  .actions{gap:8px;margin:0 -14px -90px;padding:14px}
  .actions .btn{flex:1 1 auto;min-height:44px}
  .actions .spacer{display:none}
  .actions .status{flex:1 1 100%;order:9}

  .modal .mb{max-height:70vh;padding:14px}
  .modal .mh,.modal .mf{padding:12px 14px}
  .cfm-table th,.cfm-table td{padding:6px 6px}
  .card .body{padding:14px}
  .hint,.callout{margin-left:14px;margin-right:14px}
}