:root {
  --bg: #f5f7fa;
  --card: #ffffff;
  --text: #1c2430;
  --muted: #667085;
  --line: #d9dee6;
  --primary: #1f6feb;
  --primary-text: #ffffff;
  --danger: #c62828;
  --ok: #1b7f3b;
  --done-bg: #eef7f0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161c; --card: #1c222b; --text: #e6e9ee; --muted: #9aa4b2;
    --line: #2e3744; --primary: #4c8dff; --danger: #ff6b6b; --ok: #5fd38a; --done-bg: #1a2a20;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* 隠す指定を、見た目の指定（display:flex など）より優先する */
/* 出張の画面：出張申請書のときは報告の欄、出張報告書のときは申請書の欄を隠す */
#trip.req-mode .rep-only, #trip:not(.req-mode) .req-only { display: none !important; }
/* 出張申請書は出張の前に出すので、「未精算から追加」と「その他」の枠は出さない（その他に入った分があるときだけ枠を出す） */
#trip.req-mode #trip-pick, #trip.req-mode .tsec[data-sec="other"] .tsec-adds { display: none !important; }
#trip.req-mode .tsec[data-sec="other"]:not(:has(.titem)) { display: none !important; }
/* 出張申請書では、支払方法・登録番号・領収書の種類の欄は出さない（予約票や自分で入れた予定には要らない。読み取った値は残る。
   精算の欄は出張報告書の画面で直す。上村さんの指定） */
#trip.req-mode .titem [data-k="pay"], #trip.req-mode .titem [data-k="registered"], #trip.req-mode .titem [data-k="receiptType"], #trip.req-mode .titem [data-k="receipt"],
#trip.req-mode .titem [data-save-route] { display: none !important; }
/* 出張申請書の行は1行に：日付・発地・着地・交通機関（宿泊は宿泊先）・金額・▲▼・削除（上村さんの指定）。
   行の中の段（.row）をほどいて横に並べ、順番は order で決める。欄の選択・公共以外は出さない */
#trip.req-mode .titem { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px; padding: 6px 8px; }
#trip.req-mode .titem:has(> p) { flex-wrap: wrap; }   /* 「要確認」の文があるときだけ、その文を下の行に */
#trip.req-mode .titem .move button, #trip.req-mode .titem [data-del-item] { padding: 4px 6px; font-size: 13px; }
#trip.req-mode .titem > .row { display: contents; }
#trip.req-mode .titem[data-col="transport"] > .h-only, #trip.req-mode .titem[data-col="transport"] > .o-only,
#trip.req-mode .titem[data-col="hotel"] > .t-only, #trip.req-mode .titem[data-col="hotel"] > .o-only,
#trip.req-mode .titem[data-col="other"] > .t-only, #trip.req-mode .titem[data-col="other"] > .h-only { display: none; }
#trip.req-mode .titem [data-k="tripCol"], #trip.req-mode .titem .check { display: none !important; }
#trip.req-mode .titem input, #trip.req-mode .titem select { flex: 1 1 4em; min-width: 0; width: auto; padding: 5px 6px; font-size: 13px; }
#trip.req-mode .titem [data-k="date"] { order: 1; flex: 0 0 8.6em; }
#trip.req-mode .titem [data-k="from"] { order: 2; }
#trip.req-mode .titem [data-k="to"] { order: 3; }
#trip.req-mode .titem [data-k="carrier"] { order: 4; flex-basis: 5em; }
#trip.req-mode .titem [data-k="vendor"], #trip.req-mode .titem [data-k="description"], #trip.req-mode .titem [data-k="vendorO"] { order: 2; flex-basis: 12em; }
#trip.req-mode .titem [data-k="amount"] { order: 5; flex: 0 0 5.5em; text-align: right; }
#trip.req-mode .titem .move { order: 6; margin-left: 0 !important; }
/* 1行の並びでは「⇄ 帰り」は金額のあと、泊数は宿泊先のあと */
#trip.req-mode .titem [data-copy-back], #trip.req-mode .titem [data-copy-item] { order: 6; padding: 4px 6px; font-size: 13px; white-space: nowrap; }
#trip.req-mode .titem [data-k="nights"] { order: 3; flex: 0 0 4.5em; }
#trip.req-mode .titem [data-del-item], #trip.req-mode .titem [data-unlink-item] { order: 7; }
#trip.req-mode .titem > p { order: 8; flex-basis: 100%; margin: 0; }
/* 出勤表（長期出張）は1日を1行に */
.attend.attend-1line { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.attend-1line b { flex: 0 0 6.2em; font-size: 14px; white-space: nowrap; }
.attend-1line select, .attend-1line input { min-width: 0; width: auto; padding: 5px 6px; font-size: 13px; margin: 0; }
.attend-1line select { flex: 0 0 5em; }
.attend-1line [data-k="work"] { flex: 1 1 8em; }
.attend-1line input.t { flex: 0 0 3.8em; text-align: center; }
/* 経費精算書・DC の書類の画面：明細を入れる4つのボタンを同じ大きさで1行に（スマホは2つずつ） */
#docexp-adds.adds-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#docexp-adds.adds-4 > button { width: 100%; min-width: 0; margin: 0; height: 42px; padding: 4px 6px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { #docexp-adds.adds-4 { grid-template-columns: repeat(2, 1fr); } }
/* 各画面の左上の「← 戻る」 */
.back-btn { display: inline-block; margin: 0 0 6px; padding: 4px 10px; font-size: 13px; }
/* テストモードで作った書類の印 */
.tag.test-tag { background: #fde68a; color: #92400e; border-color: #f59e0b; font-weight: 700; margin-left: 4px; }
/* ファイルを落とせる所（ドラッグ＆ドロップ） */
.drop-over { outline: 3px dashed var(--accent, #1a73e8); outline-offset: 2px; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  font-size: 16px; line-height: 1.5;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px; background: var(--primary); color: var(--primary-text);
}
.top h1 { font-size: 17px; margin: 0; }
.who { font-size: 12px; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main { max-width: 640px; margin: 0 auto; padding: 12px 16px; }
h2 { font-size: 18px; margin: 4px 0 12px; }
h3 { font-size: 15px; margin: 16px 0 8px; }
.bar { display: flex; align-items: baseline; justify-content: space-between; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.ok { color: var(--ok); }
.empty { text-align: center; color: var(--muted); padding: 32px 0; }

.cards { display: flex; flex-direction: column; gap: 8px; }
.card {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.card input[type=checkbox] { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.card .body { flex: 1; min-width: 0; cursor: pointer; }
.card .line1 { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.card .line2 { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); margin-left: 4px; font-weight: 400; }

.sticky-actions { position: sticky; bottom: calc(68px + env(safe-area-inset-bottom)); padding-top: 12px; }

.form { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); flex: 1; min-width: 0; }
.form label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--text); font-size: 15px; flex: none; padding-top: 18px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
input, select, textarea {
  font: inherit; font-size: 16px; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; width: 100%; min-width: 0;
}
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; padding: 0; }
/* iPhoneのSafariは日付の欄が決まった幅より縮まず、横の欄にはみ出すので、ふつうの欄と同じ幅の決め方にする */
input[type=date] { -webkit-appearance: none; appearance: none; display: block; min-height: 2.6em; text-align: left; }
input[type=date]::-webkit-date-and-time-value { text-align: left; }
details summary { cursor: pointer; color: var(--primary); font-size: 14px; padding: 4px 0; }
details label { margin-top: 8px; }
pre { white-space: pre-wrap; font-size: 12px; background: var(--bg); padding: 8px; border-radius: 6px; max-height: 240px; overflow: auto; }

button, .button {
  font: inherit; font-size: 15px; border-radius: 10px; padding: 11px 16px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--text); text-align: center; text-decoration: none; display: inline-block;
}
button.primary, .button.primary { background: var(--primary); color: var(--primary-text); border-color: var(--primary); font-weight: 600; }
.button.secondary { border-color: var(--primary); color: var(--primary); }
button.danger { color: var(--danger); border-color: var(--danger); }
button:disabled { opacity: .5; cursor: default; }
.wide { width: 100%; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.actions button { flex: 1; }
.total { margin: 0; text-align: right; }
.total strong { font-size: 20px; }

.capture { text-align: center; }
.shot {
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  border: 2px dashed var(--primary); border-radius: 14px; padding: 32px 16px; color: var(--primary); font-weight: 600; background: var(--card);
}
.shot-icon { font-size: 40px; }
.link a { color: var(--primary); }
.reading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 32px; color: var(--muted); }
.spinner { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.report { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.report .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; }
.report ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.route { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.route button { padding: 4px 10px; font-size: 13px; }

.tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs button { flex: 1; border: 0; border-radius: 0; background: none; padding: 6px 0 8px; font-size: 11px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tabs button span { font-size: 20px; }
.tabs button.active { color: var(--primary); font-weight: 600; }

.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 20;
  background: var(--text); color: var(--bg); padding: 12px 14px; border-radius: 10px; text-align: center; font-size: 14px;
}
.toast.error { background: var(--danger); color: #fff; }

/* 登録メニュー */
.menu { display: flex; flex-direction: column; gap: 10px; }
.menu-item { display: flex; align-items: center; gap: 14px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; width: 100%; }
.menu-item.primary-item { border: 2px solid var(--primary); }
.menu-item .ico { font-size: 28px; }
.menu-item b { display: block; font-size: 16px; }
.menu-item small { display: block; color: var(--muted); font-size: 12px; }

/* 未精算の区分ごとのまとまり */
.section { margin-bottom: 14px; }
.sec-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; padding: 6px 2px; flex-wrap: wrap; }
.sec-head input { width: 20px; height: 20px; }
.sec-head .muted { margin-left: auto; font-weight: 400; }
.cat { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 10px; background: var(--bg); }

/* 作成した書類 */
.made { background: var(--done-bg); border: 1px solid var(--ok); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.file-btn { display: block; width: 100%; text-align: left; margin-top: 6px; }
.small-btn { padding: 4px 10px; font-size: 13px; }

/* 出張の日当・出勤表 */
/* 日当：日ごとの小さな枠を横に詰めて並べる（1日1行だと長くなるため） */
#allow-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr)); gap: 6px; }
.day { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 3px 4px 3px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.day select { width: auto; padding: 4px 6px; font-size: 14px; }
.attend { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.attend .row { align-items: center; }
.attend .row input, .attend .row select { flex: 1; width: auto; }

/* まとめて読み込む */
.tag.warn { border-color: #e0a100; color: #a87400; background: #fff6d6; }
.drop { border: 2px dashed var(--line); border-radius: 12px; padding: 18px; text-align: center; color: var(--muted); font-size: 14px; }
.drop.over { border-color: var(--primary); color: var(--primary); }
.menu-item.over { background: var(--primary); color: #fff; }
.log { font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 8px; }
.log .st { flex: none; }
.log .ok { color: var(--ok); } .log .ng { color: var(--danger); }

/* 書類の確認 */
.warn-box { background: #fff6d6; color: #7a5600; border: 1px solid #e0a100; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.miss-sample, .ptable td.miss, span.miss { background: #ffe1e1; color: #b00020; }
span.miss { padding: 0 6px; border-radius: 4px; font-size: 13px; }
.pdoc { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.pdoc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.info { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 13px; margin: 0 0 8px; }
.info dt { color: var(--muted); }
.info dd { margin: 0; }
.pscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ptable { border-collapse: collapse; font-size: 13px; min-width: 100%; white-space: nowrap; }
.ptable th, .ptable td { border: 1px solid var(--line); padding: 4px 6px; text-align: left; }
.ptable th { background: var(--bg); color: var(--muted); font-weight: 600; }
.ptable td.num { text-align: right; }
.ptable tbody tr { cursor: pointer; }
.ptable tbody tr:hover { background: var(--bg); }
.ptable tr.review td { background: #fffbe8; }
.ptable tr.review td.miss { background: #ffe1e1; }
/* スマホ：表を1件ずつのカードにする（横に長くて金額が見えなかった）。空のマスは出さず、未入力だけ赤で出す */
@media (max-width: 640px) {
  .pscroll { overflow-x: visible; }
  .ptable { white-space: normal; min-width: 0; width: 100%; font-size: 14px; }
  .ptable thead { display: none; }
  .ptable, .ptable tbody { display: block; }
  .ptable tbody tr { display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 10px 8px; border-bottom: 1px solid var(--line); }
  .ptable td { display: block; border: 0; padding: 0; }
  .ptable td:empty:not(.miss) { display: none; }
  .ptable td::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); }
  .ptable td.miss { padding: 0 4px; border-radius: 4px; }
  .ptable td.miss:empty::after { content: '未入力'; }
  .ptable td.num { margin-left: auto; text-align: right; font-weight: 700; }
}
@media (prefers-color-scheme: dark) {
  .warn-box { background: #3a2f10; color: #ffd88a; border-color: #8a6a10; }
  .miss-sample, .ptable td.miss, span.miss, .ptable tr.review td.miss { background: #4a1f24; color: #ffb3bd; }
  .ptable tr.review td { background: #2f2a14; }
}

/* 出張の画面の経費 */
/* 車両運行：すっきり見せるための並べ方 */
@media (max-width: 480px) { .v-head { flex-direction: column; } }   /* スマホでは日付とよく使う行き先を上下に */
.v-quick { display: flex; gap: 8px; }
.v-quick .button { flex: 1; }
.v-dist { align-items: flex-end; }
.v-dist a.button { flex: none; white-space: nowrap; margin-bottom: 2px; }
.v-sec { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.v-sec > summary { font-weight: 600; cursor: pointer; }
.v-sec[open] > summary { margin-bottom: 8px; }
#v-newplaces:empty, #v-auto-msg:empty, #v-toll-msg:empty, #v-meter:empty { display: none; }   /* 中身がないときの余白をなくす */

/* 車両運行：出発地・到着地の「登録した場所から選ぶ」 */
.place-pick { margin-top: 4px; padding: 5px 8px; font-size: 14px; color: var(--muted, #666); }

/* 車両運行：初めての場所の住所 */
.newplace { border: 1px dashed var(--primary); border-radius: 8px; padding: 6px 8px; margin: 4px 0 8px; }
.newplace p { margin: 0 0 6px; }
.newplace .row { align-items: center; flex-wrap: nowrap; }
.newplace .row input { flex: 1; min-width: 0; }
.newplace .row a, .newplace .row label.button { flex: none; white-space: nowrap; padding-top: 0 !important; }
.newplace [data-shot-msg]:empty { display: none; }

/* 車両運行：読み込んだ高速道路の領収書（1回分ずつ） */
.toll-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.toll-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 14px; }
.toll-row .toll-leg { padding: 0 !important; white-space: nowrap; flex: none; }
.toll-row.other-day { opacity: .6; }

/* 出張の経費：交通費・宿泊・その他の枠 */
.tsec { border-top: 2px solid var(--line); padding-top: 8px; margin-bottom: 14px; }
.tsec h4 { margin: 0 0 8px; font-size: 15px; }
.tsec-adds { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 2px; }
.tsec-adds select { width: auto; max-width: 100%; flex: 1 1 14em; padding: 6px 8px; font-size: 14px; }
/* 交通費の枠の3つ（手入力・検索して入力・よく使う区間）は同じ幅・同じ高さにそろえる（上村さんの指定） */
.tsec[data-sec="transport"] .tsec-adds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tsec[data-sec="transport"] .tsec-adds > * { width: 100%; min-width: 0; margin: 0; height: 38px; padding: 4px 8px; font-size: 14px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .tsec[data-sec="transport"] .tsec-adds { grid-template-columns: 1fr; } }   /* スマホは縦に並べる */
/* 足した行・移した行を少しのあいだ目立たせる */
.titem.flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { box-shadow: 0 0 0 3px var(--primary); } to { box-shadow: 0 0 0 0 transparent; } }
.tsec-empty { margin: 0 0 6px; }
.titem { border: 1px solid var(--line); border-radius: 10px; padding: 8px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; background: var(--bg); }
.titem .row { flex-wrap: nowrap; align-items: center; }
.titem .row > input, .titem .row > select { flex: 1; width: auto; min-width: 0; padding: 7px 8px; font-size: 15px; }
.titem .row > button { flex: none; }
.titem .check { padding-top: 0 !important; white-space: nowrap; font-size: 13px !important; }
.titem[data-col="transport"] .h-only, .titem[data-col="transport"] .o-only,
.titem[data-col="hotel"] .t-only, .titem[data-col="hotel"] .o-only,
.titem[data-col="other"] .t-only, .titem[data-col="other"] .h-only { display: none; }
.warn-text { color: #a87400; margin: 0; }

/* 書類を先に選ぶ流れ */
.cat.fixed .cat-sel, .cat.fixed .cat-group { display: none !important; }
.cat-docname { margin: 0; font-weight: 600; }
.cat-docname:empty { display: none; }
.primary-line { border-color: var(--primary); color: var(--primary); }
.doc-card .head { align-items: flex-start; }
.card .unlink { flex: none; padding: 4px 10px; font-size: 13px; }

/* 並べ替え（▲▼） */
.move { display: inline-flex; gap: 2px; flex: none; }
.move .small-btn { padding: 4px 8px; }
.card .card-btns { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
/* 1段目（日付・欄・▲▼・複写・帰り・☆・外す・削除）は、ボタンを詰めて1行に収める（削除が2段目に落ちていた）。狭いスマホだけ折り返す */
.titem .row:first-child { flex-wrap: wrap; gap: 4px; }
.titem .row:first-child > input[type=date] { min-width: 8.6em; flex: 0 1 9.5em; }
.titem .row:first-child > select { min-width: 5.5em; flex: 0 1 8em; }
.titem .row:first-child > .move { margin-left: auto; }
.titem .row:first-child > .small-btn, .titem .row:first-child .move .small-btn { padding: 4px 6px; white-space: nowrap; }

/* 音声入力 */
.voice { margin-bottom: 4px; }
.voice .voice-text { margin: 6px 2px 0; }
.voice .listening { background: #fdecea; border-color: #d93025; color: #d93025; }
/* ボタンを横に均等に並べる */
.btn-row { display: flex; gap: 8px; }
.btn-row > * { flex: 1; min-width: 0; text-align: center; padding-left: 6px; padding-right: 6px; font-size: 14px; }

/* 使い方 */
.top-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.help-btn { flex: none; padding: 4px 10px; font-size: 12px; border-radius: 14px; background: rgba(255,255,255,.18); color: inherit; border: 1px solid rgba(255,255,255,.5); }
.help details { background: var(--card, #fff); border: 1px solid var(--line, #e3e6ec); border-radius: 12px; padding: 10px 14px; margin: 8px 0; scroll-margin-top: 64px; }
.help summary { font-weight: 600; cursor: pointer; padding: 4px 0; }
.help ol, .help ul { padding-left: 1.3em; margin: 8px 0; }
.help li { margin: 6px 0; line-height: 1.6; }
.help p { line-height: 1.6; }

/* 承認：タブの件数の印 */
.tabs button { position: relative; }
.badge { position: absolute; top: 2px; right: calc(50% - 22px); background: #d33; color: #fff; border-radius: 9px; min-width: 16px; padding: 0 4px; font-size: 11px; line-height: 16px; font-weight: 600; text-align: center; }
.ok-text { color: #1a7f37; }
.apcard { background: var(--card, #fff); border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 12px; margin: 10px 0; }
.apcard h3 { margin: 0 0 6px; font-size: 16px; }
.apcard p { margin: 4px 0; }
/* 承認の画面：未承認・処理済みの切り替え */
.seg { display: flex; gap: 0; margin: 8px 0; border: 1px solid var(--line, #ddd); border-radius: 8px; overflow: hidden; }
.seg button { flex: 1; border: 0; border-radius: 0; background: var(--card, #fff); padding: 8px; font-weight: 600; color: var(--muted, #666); }
.seg button.on { background: #1f6feb; color: #fff; }
.apcard .ap-check { display: flex; align-items: center; gap: 6px; float: right; font-size: 13px; }
.apcard .ap-check input { width: 20px; height: 20px; }
/* 書類の一覧の「承認済み」の見出し */
.groups-sub { margin: 18px 0 4px; font-size: 15px; }
/* 承認の画面で見せる書類の中身（ダウンロードしなくても読めるように） */
.docview { margin: 8px 0; max-height: 75vh; overflow: auto; border: 1px solid var(--line, #ddd); border-radius: 6px; background: #f3f3f3; padding: 6px; }
.docview-page { display: block; width: 100%; height: auto; background: #fff; margin: 0 0 6px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.docview-word .docx-wrapper { padding: 10px !important; background: #f3f3f3 !important; }
.docview-sheet { overflow: auto; background: #fff; }
/* Excel の印刷プレビュー（紙の見た目。画面の幅に合わせて縮める） */
.xl-wrap { overflow: hidden; }
.xl-page { background: #fff; color: #000; padding: 16px; margin: 0 0 10px; box-shadow: 0 1px 4px rgba(0,0,0,.25); transform-origin: top left; width: max-content; }
.xl-name { font-size: 11px; color: #888; margin: 0 0 4px; }
table.xl { border-collapse: collapse; table-layout: fixed; font-family: "MS PGothic", "ＭＳ Ｐゴシック", "Yu Gothic", sans-serif; font-size: 14px; line-height: 1.2; }
table.xl td { padding: 0 2px; overflow: hidden; white-space: nowrap; }
/* マイクロソフトの表示機能（Word・Excel）は枠の中でスクロールする */
.docview-office { padding: 0; overflow: hidden; max-height: none; }
.docview-frame { display: block; width: 100%; height: 75vh; border: 0; background: #fff; }
.docview-sheet table { border-collapse: collapse; font-size: 12px; }
.docview-sheet td { border: 1px solid #ccc; padding: 2px 4px; white-space: nowrap; color: #222; }
.actions label.button { flex: 1; }
/* 画面の項目名用の .form label（灰色・縦並び）に負けないように、ボタンの見た目の label を直す */
.form label.button.small-btn { flex-direction: row; justify-content: center; align-items: center; gap: 0; padding: 4px 10px; font-size: 13px; color: var(--text); }
.form label.button.small-btn.primary-line { color: var(--primary); border-color: var(--primary); }
/* 私有車使用申請書：行き先を押して選ぶ */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip { padding: 6px 12px; font-size: 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); }
.chip.on { background: var(--primary); border-color: var(--primary); color: var(--primary-text); font-weight: 600; }
.car-pick { border: 1px dashed var(--line); border-radius: 10px; padding: 8px 10px; }
.chip.base { border-color: var(--primary); color: var(--primary); }
#car-seq { line-height: 2; }
#car-seq .muted { margin: 0 4px; }
.chip-wrap { display: inline-flex; align-items: center; }
.chip-del { padding: 2px 7px; margin-left: -4px; font-size: 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); line-height: 1.4; }

/* 承認の依頼先を選ぶ画面 */
.ap-choose { border: 0; border-radius: 12px; padding: 16px; max-width: 360px; width: calc(100% - 32px); box-shadow: 0 4px 20px rgba(0,0,0,.3); }
.ap-choose::backdrop { background: rgba(0,0,0,.35); }

/* 設定：新しい書類を作るに出す書類 */
.docmenu-row { align-items: center; }
.docmenu-row .check { margin: 0; flex: 1; }
.docmenu-row .small-btn { min-width: 36px; }

/* 所属長の画面：合計金額を大きく */
.ap-total { font-size: 20px; font-weight: 700; margin: 4px 0 6px; }
.ap-title { font-size: 17px; font-weight: 700; margin: 4px 0; }   /* 承認依頼の件名（前は小さい字で見にくかった） */

/* 承認を依頼する前の確認 */
.ap-confirm { max-width: 720px; max-height: 92vh; overflow: auto; }
.ap-confirm .docview { max-height: 55vh; }
.ap-confirm .apc-opt { display: flex; align-items: center; gap: 8px; margin: 4px 0; }

/* テストモードの帯 */
.test-banner { background: #fff3cd; color: #7a5600; border-bottom: 1px solid #e0c36a; padding: 6px 12px; font-size: 13px; text-align: center; font-weight: 600; }

/* 所属長の画面：書類から読んだ内容（日程・行先・過不足精算など） */
.ap-info { font-size: 16px; font-weight: 700; line-height: 1.6; margin: 4px 0 6px; }
#apc-total { white-space: pre-line; }

/* 書類の中身を画面いっぱいに（所属長の画面の「大きく見る」） */
.docview.docview-full { position: fixed; inset: 0; z-index: 2000; max-height: none; margin: 0; border: 0; border-radius: 0; background: #5f6368; padding: 48px 16px 16px; overflow: auto; }
.docview-full .docview-page { margin: 0 auto 12px; }
.docview-full canvas.docview-page.big { max-width: none; }
/* 大きく見るときは、PDF・写真を画面の幅に合わせて広げる（Excel と同じ） */
.docview-full canvas.docview-page:not(.big) { width: 100%; height: auto; max-width: none; display: block; }
.docview-full .docview-frame { height: calc(100vh - 64px); max-width: 1200px; margin: 0 auto; }
.docview-full .xl-wrap { margin: 0 auto; }
.docview-full > p.small { color: #eee; }
.docview-full .xl-full-row { display: none; }   /* 広げているあいだは「✕ 閉じる」で戻る */
.full-close { position: fixed; top: 8px; right: 12px; z-index: 2001; background: #fff; border: 0; border-radius: 6px; padding: 6px 14px; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
body.no-scroll { overflow: hidden; }
/* 参考の書類（購入伺い書に付ける見積書など） */
.ref-box { border: 1px dashed var(--line); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.ref-box > p { margin: 0 0 6px; }
.ref-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }
.ref-item .ref-view { flex-basis: 100%; }
.linkish { background: none; border: 0; padding: 2px 0; color: var(--primary, #1a73e8); text-decoration: underline; cursor: pointer; text-align: left; font-size: 14px; }