:root{
  --bg:#f4f6f9; --card:#fff; --ink:#1f2a37; --muted:#6b7280; --line:#e5e7eb;
  --brand:#2563eb; --brand-d:#1d4ed8; --ok:#059669; --warn:#d97706; --danger:#dc2626;
}
*{box-sizing:border-box}
/* 画面から隠すための印。
   ★これが無いと、隠したつもりのものが全部見えたままになる。
     class="hidden" はHTMLの hidden 属性とは別物で、CSSで定義しないと何も起きない。
     2026-09-12まで定義が抜けており、未読0件のバッジ・発行権限が無い人への「＋新規回覧」タブ・
     管理者以外への「管理」タブ・アンケートの選択肢欄が、ずっと出たままになっていた
     （押してもサーバー側で弾かれるので実害は無かったが、紛らわしい）。
     勤怠ポータルには同じ指定が最初から入っている。 */
.hidden{display:none !important}
body{margin:0;font-family:"Hiragino Kaku Gothic ProN","Meiryo",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6}
button{font-family:inherit;cursor:pointer}
a{color:var(--brand);text-decoration:none}

/* ---------- ログイン ---------- */
.login-body{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:16px}
.login-card{background:var(--card);padding:32px;border-radius:14px;width:100%;max-width:380px;
  box-shadow:0 10px 30px rgba(0,0,0,.08)}
.login-card h1{margin:0 0 4px;font-size:22px}
.login-sub{color:var(--muted);margin:0 0 20px;font-size:14px}
.login-card label{display:block;font-size:13px;color:var(--muted);margin:12px 0 4px}
.login-card input{width:100%;padding:11px;border:1px solid var(--line);border-radius:8px;font-size:16px}
.login-card button{width:100%;margin-top:16px;padding:12px;background:var(--brand);color:#fff;
  border:none;border-radius:8px;font-size:16px;font-weight:600}
.login-card button:hover{background:var(--brand-d)}
.login-card button.link{background:none;color:var(--muted);font-weight:400;font-size:13px;padding:6px;margin-top:8px}
.hello{font-weight:600;margin:0 0 4px}

/* ---------- ヘッダー ---------- */
.topbar{display:flex;align-items:center;gap:16px;background:var(--card);padding:10px 18px;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;flex-wrap:wrap}
.brand{font-weight:700;font-size:18px;cursor:pointer}
.tabs{display:flex;gap:4px;flex:1}
.tab{background:none;border:none;padding:8px 14px;border-radius:8px;font-size:15px;color:var(--muted);position:relative}
.tab:hover{background:var(--bg)}
.tab.active{background:var(--brand);color:#fff}
.user{display:flex;align-items:center;gap:8px;font-size:14px}
.mini{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:5px 10px;font-size:13px}
.badge{background:var(--danger);color:#fff;border-radius:10px;font-size:11px;padding:1px 7px;margin-left:6px}

/* ---------- メイン ---------- */
#app{max-width:820px;margin:0 auto;padding:20px 16px 60px}
.loading,.empty{color:var(--muted);text-align:center;padding:40px}
.view-title{font-size:18px;margin:0 0 16px}

/* ---------- 一覧カード ---------- */
.list{display:flex;flex-direction:column;gap:10px}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;color:var(--ink);transition:.15s}
.card:hover{border-color:var(--brand);box-shadow:0 2px 10px rgba(0,0,0,.05)}
.card.unread{border-left:4px solid var(--brand)}
.card-top{display:flex;align-items:center;gap:8px}
.card-title{font-weight:600;font-size:15px;overflow-wrap:anywhere;word-break:break-word}
.card-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;font-size:13px;color:var(--muted)}
.new-dot{background:var(--brand);color:#fff;font-size:10px;padding:1px 6px;border-radius:8px;font-weight:700}
/* 返信の件数。まだ見ていない返信があるときだけ色を付ける */
.reply-mark{font-size:11px;padding:1px 7px;border-radius:8px;background:#eef2f7;color:#55637a;white-space:nowrap}
.reply-mark.has-new{background:#fff3cd;color:#8a6100;font-weight:700}
.imp{font-size:11px;padding:2px 8px;border-radius:6px;font-weight:700}
.imp-normal{background:#eef2ff;color:#4338ca}
.imp-important{background:#fef3c7;color:#b45309}
.imp-urgent{background:#fee2e2;color:#b91c1c}
.deadline{color:var(--warn)}
.ok{color:var(--ok);font-weight:600}
.muted{color:var(--muted)}

/* ---------- 詳細 ---------- */
.detail-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px}
.back{display:inline-block;font-size:14px}
.danger{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.danger:hover{background:#fee2e2}
.c-attach{margin-top:6px}
.detail-head{display:flex;align-items:center;gap:10px}
.detail-head h2{margin:0;font-size:20px;overflow-wrap:anywhere;word-break:break-word}
.detail-info{display:flex;flex-wrap:wrap;gap:14px;font-size:14px;margin:8px 0 16px;color:var(--muted)}
.body{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;
  white-space:pre-wrap;min-height:60px;
  /* 空白のない長いURL等も枠内で折り返す */
  overflow-wrap:anywhere;word-break:break-word}
.auto-link{text-decoration:underline;overflow-wrap:anywhere}
.sub{font-weight:700;font-size:14px;margin:22px 0 8px}
.attachments{margin-top:8px}
.attach{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:8px 12px;margin:4px 6px 4px 0;font-size:14px;max-width:100%;overflow-wrap:anywhere}
.ack-box{margin:20px 0;text-align:center}
.big{font-size:16px}
.primary{background:var(--brand);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:15px;font-weight:600}
.primary:hover{background:var(--brand-d)}
.primary:disabled{opacity:.5}
.primary.big{width:100%;padding:14px;margin-top:12px}

/* ---------- 既読状況 ---------- */
.status-box{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;margin-top:8px}
.status-tbl{width:100%;border-collapse:collapse;font-size:14px}
.status-tbl th,.status-tbl td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.status-tbl th{color:var(--muted);font-weight:600;font-size:12px}

/* ---------- コメント ---------- */
.comments{margin-top:8px}
.comment{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:8px}
.c-author{font-weight:600}
.c-date{margin-left:8px;font-size:12px}
.c-body{margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.c-input{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px;font-size:15px;font-family:inherit;margin-bottom:8px}

/* ---------- 作成フォーム ---------- */
.compose .field{margin-bottom:16px}
.compose label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}
.compose input[type=text],.compose textarea,.compose select,.compose input[type=date]{
  width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font-size:15px;font-family:inherit}
.row{display:flex;gap:14px}
.row .field{flex:1}
.target-box{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px}
.target-all{display:block;font-weight:600;color:var(--ink);margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.dept-grp{margin-bottom:10px}
.dept-head{display:block;margin-bottom:4px}
.members{display:flex;flex-wrap:wrap;gap:4px 16px;padding-left:18px}
.member{font-size:14px;color:var(--ink);font-weight:400}
.field label+.target-box .member{display:inline-flex;align-items:center}

.err{color:var(--danger);font-size:14px;min-height:20px}
.small{font-size:13px}

/* 検索ボックス */
.search{margin:0}
.search input{border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:14px;width:180px}
.search input:focus{outline:none;border-color:var(--brand)}

/* アンケート（詳細表示） */
.poll-box{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;margin-top:16px}
.poll-opt{display:block;width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:10px 14px;margin:6px 0;font-size:15px}
.poll-opt:hover{border-color:var(--brand)}
.poll-opt.chosen{background:#eef2ff;border-color:var(--brand);color:var(--brand-d);font-weight:600}
.poll-tally{margin-top:12px}
.tally-row{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:14px}
.tally-label{width:90px;flex-shrink:0}
.tally-bar{flex:1;background:var(--bg);border-radius:6px;height:16px;overflow:hidden}
.tally-fill{background:var(--brand);height:100%}
.tally-num{width:80px;text-align:right;flex-shrink:0;color:var(--muted)}

/* アンケート入力（作成フォーム） */
.poll-toggle{display:block;font-size:14px;color:var(--ink);margin-bottom:8px}
.poll-inputs{display:flex;flex-direction:column;gap:6px}
.poll-in{width:100%}

/* 確認状況ヘッダー（催促ボタン） */
.status-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.remind{background:#fff7ed;border-color:#fed7aa;color:#c2410c}
.remind:hover{background:#ffedd5}

/* 管理テーブル */
.tbl-scroll{overflow-x:auto}
.admin-tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.admin-tbl th,.admin-tbl td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.admin-tbl th{color:var(--muted);font-weight:600;font-size:12px}
.admin-tbl tr.inactive{opacity:.5}
.bulk-bar{display:flex;align-items:center;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.bulk-all{font-size:14px;color:var(--ink)}
.bulk-row{display:flex;align-items:flex-start;gap:10px}
.bulk-row>input[type=checkbox]{margin-top:16px;flex-shrink:0}
.bulk-row .card{flex:1}
.heavy-size{color:var(--warn);font-weight:600}
.recipient-chips{display:flex;flex-wrap:wrap;gap:6px}
.rcpt-chip{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:3px 10px;font-size:13px}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.pager-info{font-size:13px;color:var(--muted)}
.locked{color:var(--danger);font-weight:600}
.unlock{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.unlock:hover{background:#fee2e2}

/* ---------- 発信後の修正・対象者の追加・コピー ---------- */
/* 詳細画面の上部はボタンが増えたので、戻るリンクを左、操作ボタンを右にまとめて折り返す */
.detail-top{flex-wrap:wrap}
.detail-top .back{margin-right:auto}
.btn-link{display:inline-block;background:var(--bg);border:1px solid var(--line);border-radius:6px;
  padding:5px 10px;font-size:13px;color:var(--ink)}
.btn-link:hover{border-color:var(--brand);color:var(--brand)}
/* 発信後に直した回覧の印（読む人にも見える） */
.edited-mark{color:var(--warn);font-weight:600}
/* 後から対象に追加された人の印 */
.added-mark{margin-left:6px;font-size:11px;color:var(--brand);background:#eef2ff;
  border:1px solid #c7d2fe;border-radius:10px;padding:1px 7px;white-space:nowrap}
/* すでに対象になっている人（追加画面でチェック不可） */
.member.done{color:var(--muted)}
/* コピーして新規作成のときの説明 */
.copy-note{background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:10px 14px;
  font-size:13px;color:var(--ink);margin:0 0 16px}
/* 変更履歴 */
.edit-log{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;margin-top:16px}
.edit-log summary{cursor:pointer;font-weight:600;font-size:14px}
.edit-item{border-top:1px solid var(--line);margin-top:10px;padding-top:10px;font-size:14px}
.edit-before{margin-top:6px}
.edit-before summary{cursor:pointer;font-weight:400;font-size:13px;color:var(--muted)}

/* ---------- 添付ファイルの選択（ドラッグ＆ドロップ） ---------- */
.file-picker{display:block}
/* 返信コメントの中では、本文と送信ボタンの間に少し余白を置く */
.comments .file-picker{margin:0 0 10px}
/* 返信欄の添付枠は、本文より控えめでよい */
.comments .dropzone{padding:12px}
.fp-hidden{display:none}
.dropzone{border:2px dashed var(--line);border-radius:10px;background:var(--card);
  padding:18px 14px;text-align:center;cursor:pointer;transition:border-color .12s,background .12s}
.dropzone:hover,.dropzone:focus{border-color:var(--brand);background:#f8fafc;outline:none}
/* ファイルを枠の上まで持ってきたとき。落とせる場所だと分かるように色を変える */
.dropzone.over{border-color:var(--brand);background:#eff6ff}
.fp-icon{font-size:22px;line-height:1}
.fp-main{font-size:14px;font-weight:600;margin:2px 0}
.fp-list{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.fp-row{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:6px 10px;font-size:14px}
.fp-name{flex:1;overflow-wrap:anywhere;word-break:break-word}
.fp-size{flex-shrink:0}
.fp-x{flex-shrink:0;background:none;border:none;color:var(--muted);font-size:15px;line-height:1;
  padding:2px 6px;border-radius:6px}
.fp-x:hover{background:#fee2e2;color:var(--danger)}
.fp-total{text-align:right}
.fp-msg{color:var(--danger);font-size:13px;margin:6px 0 0;min-height:0}
/* 添付1件の行（詳細画面。✕で消せる） */
.attach-row{display:inline-flex;align-items:center;gap:2px;flex-wrap:wrap}
/* ---------- 添付を開く画面（view.html） ---------- */
/* 画面いっぱいにビューアを出したいので、ここだけスクロールを外側に持たせない */
.view-body{margin:0;height:100vh;display:flex;flex-direction:column;background:#525659}
.view-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--card);
  border-bottom:1px solid var(--line);flex-wrap:wrap;flex-shrink:0}
.view-icon{flex-shrink:0}
.view-name{font-weight:600;overflow-wrap:anywhere;word-break:break-word}
.view-grow{flex:1}
.view-frame{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto}
.view-iframe{width:100%;height:100%;border:0}
.view-img{max-width:100%;max-height:100%;object-fit:contain}
.view-video{max-width:100%;max-height:100%;background:#000}
.view-frame .loading,.view-frame .err{color:#fff}
.view-msg{color:#fff;padding:16px;text-align:center}
/* テキスト・CSVは白い紙の上に置く（黒背景だと読みにくい） */
.view-frame > .view-text,.view-frame > .view-sheet{
  align-self:stretch;margin:0;background:var(--card);width:100%;min-height:100%;
  overflow:auto;padding:16px}
.view-text{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;
  font-family:"Consolas","Meiryo",monospace;font-size:13px;line-height:1.7}
.view-table{border-collapse:collapse;font-size:13px}
.view-table th,.view-table td{border:1px solid var(--line);padding:4px 9px;
  text-align:left;white-space:nowrap}
.view-table th{background:var(--bg);position:sticky;top:0;font-weight:600}
.view-note{font-size:13px;color:var(--muted);margin:10px 0 0}

/* 別タブで開ける添付に添える「保存」。本体のリンクより控えめにする */
.attach-dl{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:6px;
  padding:2px 8px;white-space:nowrap}
.attach-dl:hover{border-color:var(--brand);color:var(--brand)}

/* ---------- 自動削除の予定 ---------- */
.warn-text{color:var(--warn);margin-top:6px}
.autodel-box{background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:10px 14px;
  font-size:13px;color:#9a3412;margin:12px 0}
.autodel-mark{color:var(--warn)}

/* 回覧板から引き継いだ指定。タブまわりはこのファイルの末尾で作り直しているので、
   ここでは触らない（2か所で同じものを指定すると、どちらが効くか分かりにくくなる） */
@media(max-width:600px){
  .row{flex-direction:column;gap:0}
}

/* ---------- 設定（配色・パスワード） ---------- */
/* 他の2アプリと同じ見た目・同じ並びにそろえてある */
.themes{display:flex;gap:8px;flex-wrap:wrap}
.themes label{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
  border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:14px;background:var(--card)}
.themes label.on{border-color:var(--brand);background:#f8fafc;font-weight:600}
.themes .dot{width:16px;height:16px;border-radius:50%;display:inline-block}
.themes input{display:none}
/* 設定の重ね表示。パスワード入力中に外側を押しても閉じない */
.ov{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;
  justify-content:center;padding:16px;z-index:50;overflow:auto}
.ovbox{background:var(--card);border-radius:12px;padding:22px;width:100%;max-width:460px;
  box-shadow:0 12px 40px rgba(0,0,0,.2)}
.ovbox h2{margin:0 0 12px;font-size:19px}
.ovbox h3{margin:20px 0 8px;font-size:15px}
.ovbox .field{margin-bottom:12px}
.ovbox .field label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.ovbox input[type=password]{width:100%;padding:9px;border:1px solid var(--line);border-radius:8px;font-size:15px}
.ovbox .row{display:flex;gap:12px}
.ovbox .row .field{flex:1}
.ovfoot{margin-top:18px;text-align:right}

/* ============================================================
   経費精算だけで使う指定（ここから下）
   ============================================================ */

/* ---------- 入れもの ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:16px}
.panel h3{margin:0 0 10px;font-size:15px}
.panel h3+.note{margin-top:-4px}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.btnrow input[type=text]{flex:1;min-width:180px;padding:10px;border:1px solid var(--line);border-radius:8px;font-size:15px}
.ghost{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:11px 18px;
  font-size:15px;color:var(--ink)}
.ghost:hover{border-color:var(--brand)}
.ghost.danger{color:#b91c1c;border-color:#fecaca;background:#fef2f2}
a.btn{display:inline-block;text-decoration:none}
.hint{margin:4px 0 0;font-size:12px;color:var(--muted)}
.note{background:#f8fafc;border-left:3px solid var(--brand);border-radius:0 6px 6px 0;
  padding:10px 12px;margin:10px 0;font-size:13px;color:#475569;white-space:pre-wrap}
.badge-gray{background:var(--muted)}
.warn{color:var(--warn);font-weight:600}

/* ---------- 入力欄（.compose の外でも同じ見た目にする） ---------- */
.field{margin-bottom:14px}
.field>label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}
.field input[type=text],.field input[type=number],.field input[type=date],
.field input[type=month],.field select{
  width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font-size:16px;font-family:inherit;
  background:var(--card);color:var(--ink)}
.field input:focus,.field select:focus{outline:none;border-color:var(--brand)}
/* 金額はいちばん打つところなので大きく */
.field input.amount{font-size:22px;font-weight:700;text-align:right;padding:12px}
.itemform details{margin-top:4px}
.itemform summary{font-size:13px;color:var(--muted);cursor:pointer;padding:4px 0}

/* 税率などのボタン選び */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 18px;font-size:15px}
.chip:hover{border-color:var(--brand)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}

/* ---------- 写真を選ぶ ---------- */
.picker{margin-bottom:16px}
.pickbtn{display:block;text-align:center;background:var(--brand);color:#fff;border-radius:10px;
  padding:16px;font-size:16px;font-weight:600;cursor:pointer}
.pickbtn:hover{background:var(--brand-d)}
.pickbtn input{display:none}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.thumb,.photo{position:relative;width:104px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);padding:4px;font-size:11px;color:var(--ink);text-align:center;overflow:hidden}
.thumb img,.photo img{width:100%;height:80px;object-fit:cover;border-radius:5px;display:block}
.thumb-file{height:80px;display:flex;align-items:center;justify-content:center;font-size:32px;background:var(--bg);border-radius:5px}
.thumb-name{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.thumb-x{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;
  border:none;background:rgba(15,23,42,.7);color:#fff;font-size:14px;line-height:1;padding:0}
.thumb-x:hover{background:var(--danger)}
.photos{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

/* ---------- 表 ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl th{color:var(--muted);font-weight:600;font-size:12px;white-space:nowrap}
.tbl .right{text-align:right}
.tbl .total-row td{font-weight:700;border-top:2px solid var(--line);border-bottom:none}
.tbl select.psel{padding:5px;border:1px solid var(--line);border-radius:6px;font-size:13px;max-width:120px}
.tbl .mini{margin-right:4px}

/* ---------- 一覧カード ---------- */
.st{font-size:11px;padding:2px 9px;border-radius:6px;font-weight:700;white-space:nowrap}
.st-draft{background:#f1f5f9;color:#475569}
.st-pending{background:#fef3c7;color:#b45309}
.st-approved{background:#dcfce7;color:#15803d}
.st-rejected{background:#fee2e2;color:#b91c1c}
.st-paid{background:#e0e7ff;color:#4338ca}
.amount-tag{margin-left:auto;font-weight:700;font-size:15px;white-space:nowrap}
.myturn{color:var(--brand);font-weight:700}
.card.status-rejected{border-left:4px solid var(--danger)}
.card.status-draft{border-left:4px solid var(--muted)}

/* ---------- 詳細 ---------- */
.total-line{font-size:22px;font-weight:700;margin:4px 0 16px}
.stages{display:flex;flex-wrap:wrap;gap:8px}
.stage{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:6px 14px;font-size:13px;color:var(--muted)}
.stage.done{background:#dcfce7;border-color:#bbf7d0;color:#15803d;font-weight:600}
.stage.current{border-color:var(--brand);color:var(--brand-d);font-weight:700;background:#eff6ff}

.items{display:flex;flex-direction:column;gap:10px}
.item{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px}
.item-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.item-date{font-size:13px;color:var(--muted);white-space:nowrap}
.item-payee{font-weight:600;overflow-wrap:anywhere}
.item-amount{margin-left:auto;font-size:18px;font-weight:700;white-space:nowrap}
.item-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tag{font-size:12px;padding:2px 9px;border-radius:6px;background:var(--bg);color:#475569}
.tag-job{background:#eef2ff;color:#4338ca;font-weight:600}
.tag-tax{background:#f8fafc}
.item-note{margin-top:8px;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}

.history{display:flex;flex-direction:column;gap:6px}
.hist{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:14px}
.hist-act{font-weight:700;font-size:12px;padding:2px 8px;border-radius:6px;background:var(--bg)}
.hist-approved{background:#dcfce7;color:#15803d}
.hist-rejected{background:#fee2e2;color:#b91c1c}
.hist-paid{background:#e0e7ff;color:#4338ca}
.hist-c{margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere}

/* ---------- 管理 ---------- */
.subtabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.subtab{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 14px;font-size:14px;color:var(--muted)}
.subtab.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.mlist{display:flex;flex-direction:column;gap:6px}
.mrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mrow.off{opacity:.55}
.mname{flex:1;min-width:160px;padding:8px;border:1px solid var(--line);border-radius:8px;font-size:15px}
.mrate{padding:8px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.checks{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px}
.chk{font-size:14px;display:inline-flex;align-items:center;gap:5px}

/* パソコンではタブに絵文字と短い名前は出さない（文字だけの見た目にそろえる） */
.ti,.ts{display:none}

/* ============================================================
   スマホ（画面が狭いとき）
   ============================================================
   ★タブを画面の下に固定する。
     上に横並びにすると、
       ・親指が届かない（片手で持つと画面の上半分は押しにくい）
       ・幅が足りず横スクロールになり、「承認」「管理」に気づけない
       ・名前やログアウトと混ざって、どれがタブか分かりにくい
     という3つが同時に起きる。下に固定すると、どれも起きない。 */
@media (max-width:640px){
  /* ---- 上のバーは、アプリ名と自分の名前だけにする ---- */
  .topbar{gap:8px;padding:8px 12px;flex-wrap:nowrap}
  .brand{font-size:16px;flex-shrink:0}
  .user{margin-left:auto;gap:6px;min-width:0}
  #me-name{font-size:12px;color:var(--muted);overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;max-width:38vw}
  .user .mini{padding:6px 8px;font-size:12px;flex-shrink:0}
  /* ログアウトは設定の中にも置いてあるので、狭い画面では上から外す */
  #btn-logout{display:none}

  /* ---- タブを画面の下に固定する ---- */
  .tabs{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    display:flex;gap:0;background:var(--card);
    border-top:1px solid var(--line);
    box-shadow:0 -2px 12px rgba(0,0,0,.06);
    /* iPhoneのホームバーに隠れないよう、下に余白を足す */
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .tab{
    flex:1 1 0;min-width:0;position:relative;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;padding:8px 2px 6px;border-radius:0;
    font-size:11px;line-height:1.2;color:var(--muted);
  }
  .tab:hover{background:none}
  /* 押している間だけ色を変える（指で触れたことが分かるように） */
  .tab:active{background:var(--bg)}
  /* いま見ているタブ。下地は塗らず、文字と絵文字の色＋上の線で示す */
  .tab.active{background:none;color:var(--brand);font-weight:700}
  .tab.active::before{
    content:'';position:absolute;top:0;left:18%;right:18%;height:3px;
    background:var(--brand);border-radius:0 0 3px 3px;
  }
  .ti{display:block;font-size:19px;line-height:1}
  .tl{display:none}              /* パソコン用の長い名前は隠す */
  .ts{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  /* 件数のしるしは、絵文字の右肩に小さく出す */
  .tabs .badge{
    position:absolute;top:3px;left:50%;margin-left:4px;
    min-width:17px;padding:0 4px;height:17px;line-height:17px;
    font-size:10px;text-align:center;border-radius:9px;
  }

  /* ---- 中身 ---- */
  /* 下のタブバーに隠れないよう、本文の下に余白を空ける */
  #app{padding:14px 12px calc(78px + env(safe-area-inset-bottom,0px))}
  .view-title{font-size:17px;margin-bottom:12px}
  .btnrow{flex-direction:column;align-items:stretch}
  .btnrow button,.btnrow a.btn{width:100%;text-align:center;padding:13px}
  /* 金額は折り返して独立した行にする。
     横に並べると、件名が2〜3行に割れて読みにくくなるため */
  .card-top,.item-head{flex-wrap:wrap}
  .amount-tag{margin-left:0;width:100%;font-size:17px}
  .item-amount{margin-left:0;width:100%}
  .card-title{flex:1 1 100%}
  /* 管理の表は横に広いので、はみ出す分はスクロールさせる */
  .panel{overflow-x:auto}
  /* 重ねて出す画面も、下のタブバーに隠れないようにする */
  .ov{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}

/* 特に狭い端末（iPhone SE など）。文字を少しだけ詰める */
@media (max-width:360px){
  .tab{font-size:10px;padding:7px 1px 5px}
  .ti{font-size:17px}
  #me-name{max-width:28vw}
}

/* ---------- 電子帳簿保存法（スキャナ保存）まわり ---------- */
/* 取り消したもの。消さずに残すので、ひと目で「無効」と分かるようにする */
.item.voided{opacity:.6;background:repeating-linear-gradient(45deg,
  var(--card),var(--card) 10px,#f8fafc 10px,#f8fafc 20px)}
.item.voided .item-amount{text-decoration:line-through}
tr.voided td{opacity:.6;text-decoration:line-through}
.st-void{background:#e2e8f0;color:#475569}
.void-note{margin:6px 0 0;font-size:13px;color:#b45309;background:#fffbeb;
  border-radius:6px;padding:6px 10px}
.photo.voided{opacity:.5}
.photo.voided img{filter:grayscale(1)}

/* 写真に添える保存情報（保存日時・画素数・期限） */
.photo-meta{margin-top:2px;font-size:10px;color:var(--muted);line-height:1.35}
.photo-meta .over{color:var(--danger);font-weight:700}
.hint.over{color:var(--danger);font-weight:600}

/* 訂正・取消の記録 */
.edits{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px}
.edits summary{cursor:pointer;font-weight:600;font-size:14px}
.edits .tbl{margin-top:10px}
.edits .before{color:var(--muted);text-decoration:line-through}
.hist-created{background:#eef2ff;color:#4338ca}
.hist-updated{background:#fef3c7;color:#b45309}
.hist-voided,.hist-photo_voided{background:#e2e8f0;color:#475569}
.hist-photo_added{background:#dcfce7;color:#15803d}
.nowrap{white-space:nowrap}

/* 撮り方のコツ */
.shoot{margin-top:10px;background:#f8fafc;border-radius:8px;padding:8px 12px}
.shoot summary{cursor:pointer;font-size:13px;color:var(--brand-d);font-weight:600}
.shoot ul{margin:8px 0 4px;padding-left:20px;font-size:13px;color:#475569}
.shoot li{margin:3px 0}

/* 点検の結果（原本を捨ててよいかの判定） */
.judge{border-radius:10px;padding:14px 16px;margin-bottom:16px;font-size:14px}
.judge-head{font-size:16px;font-weight:700;margin-bottom:4px}
.judge.ok{background:#dcfce7;border:1px solid #bbf7d0;color:#15803d}
.judge.ng{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}