/* ============================================================
   販売管理システム 共通スタイル
   (ネイビータイトルバー + 淡青グレー背景 / 業務システム風)
   ============================================================ */
:root {
  --navy: #1a2a6c;
  --navy-dark: #101c4e;
  --panel: #d6d9e8;
  --panel-light: #e4e6f0;
  --btn-face: #f0f0f4;
  --btn-border: #8a8fa8;
  --accent: #2b4bb5;
  --yellow: #ffff99;
  --red: #cc0000;
  --green: #0a7a2a;
  --grid-line: #b8bcd0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: "Yu Gothic UI", "Meiryo UI", "MS UI Gothic", sans-serif;
  font-size: 13px;
  background: #c8ccdc;
  color: #111;
  height: 100%;
}

/* ---------- アプリ全体枠 ---------- */
.app-frame {
  display: flex;
  flex-direction: column;
  height: 100vh;
  border: 2px solid #9aa0b8;
  background: var(--panel);
}

/* ---------- タイトルバー ---------- */
.title-bar {
  background: linear-gradient(to bottom, #3a4a8c, var(--navy));
  color: #fff;
  padding: 5px 12px;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.title-bar .logo { color: #7ec8ff; font-size: 16px; }

/* ---------- ヘッダー (MEMO / DATE / USER / TERM) ---------- */
.app-header {
  display: flex;
  background: var(--panel-light);
  border-bottom: 2px solid #9aa0b8;
  padding: 6px 10px;
  gap: 10px;
  align-items: stretch;
}
.memo-box { flex: 1; display: flex; gap: 6px; }
.memo-label {
  background: var(--navy);
  color: #fff;
  padding: 8px 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.memo-rows { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.memo-row { display: flex; align-items: center; gap: 4px; flex: 1; }
.memo-tag {
  background: var(--navy);
  color: #fff;
  font-size: 10.5px;
  font-weight: bold;
  padding: 2px 6px;
  min-width: 34px;
  text-align: center;
}
.memo-tag.personal { background: #0a6a3a; }
.memo-input {
  flex: 1;
  border: 1px solid var(--btn-border);
  background: #fff;
  padding: 3px 8px;
  font-size: 12.5px;
  font-family: inherit;
}
.memo-input.dirty { background: #fff8dc; }
.memo-save {
  border: 1px solid var(--btn-border);
  background: linear-gradient(to bottom, #fff, #d8d8e0);
  border-radius: 3px;
  cursor: pointer;
  padding: 2px 7px;
  font-size: 12px;
  visibility: hidden;
}
.memo-row:hover .memo-save, .memo-save.show { visibility: visible; }
.info-box { min-width: 220px; }
.info-box table { border-collapse: collapse; width: 100%; }
.info-box td { border: 1px solid var(--btn-border); padding: 2px 8px; background: #fff; }
.info-box td.k {
  background: var(--navy);
  color: #fff;
  font-weight: bold;
  width: 52px;
  text-align: center;
}

/* ---------- 本体レイアウト ---------- */
.app-body { display: flex; flex: 1; overflow: hidden; }

/* 左メニュー */
.side-menu {
  width: 185px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--panel);
  border-right: 2px solid #9aa0b8;
  overflow-y: auto;
}
.side-menu .m-btn {
  display: block;
  width: 100%;
  padding: 9px 6px;
  text-align: center;
  background: linear-gradient(to bottom, #ffffff, var(--btn-face) 45%, #d8d8e0);
  border: 1px solid var(--btn-border);
  border-radius: 3px;
  box-shadow: 1px 1px 2px rgba(0,0,0,.25);
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  color: #111;
  text-decoration: none;
}
.side-menu .m-btn:hover { background: #fdf6d8; }
.side-menu .m-btn.active {
  background: linear-gradient(to bottom, #dce8ff, #b8ccf5);
  border: 2px solid var(--accent);
}
.side-menu .m-btn.quit { margin-top: auto; }
.fiscal-badge {
  background: var(--yellow);
  border: 1px solid #b8a800;
  text-align: center;
  padding: 4px;
  font-weight: bold;
  margin-top: 6px;
}

/* 右コンテンツ */
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel-light);
}
.content-title {
  background: var(--navy);
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
}
.content-title .ct-text { flex: 1; text-align: center; letter-spacing: .5em; }
.fs-btn {
  background: linear-gradient(to bottom, #4a5a9c, #2a3a7c);
  color: #fff;
  border: 1px solid #7a8ac0;
  border-radius: 3px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.fs-btn:hover { background: #5a6aac; }

/* ---------- 全画面モード (メニュー・ヘッダーを隠して作業領域を最大化) ---------- */
body.fullscreen-mode .title-bar,
body.fullscreen-mode .app-header,
body.fullscreen-mode .side-menu { display: none; }
body.fullscreen-mode .app-frame { border: none; }
.content-inner { flex: 1; overflow: auto; padding: 14px; }

/* メニューボタン群 */
.menu-grid { display: flex; flex-direction: column; gap: 10px; }
.menu-row { display: flex; gap: 10px; flex-wrap: wrap; }
.menu-btn {
  min-width: 170px;
  padding: 9px 14px;
  background: linear-gradient(to bottom, #ffffff, var(--btn-face) 45%, #d8d8e0);
  border: 1px solid var(--btn-border);
  border-radius: 3px;
  box-shadow: 1px 1px 3px rgba(0,0,0,.3);
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  color: #111;
  text-align: center;
}
.menu-btn:hover { background: #fdf6d8; }
.menu-btn:active { box-shadow: inset 1px 1px 3px rgba(0,0,0,.3); }

/* ---------- フォーム部品 ---------- */
.form-section {
  background: var(--panel-light);
  border: 1px solid var(--grid-line);
  padding: 10px;
  margin-bottom: 10px;
}
.frm-row { display: flex; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; align-items: center; }
.fld { display: flex; align-items: center; gap: 4px; }
.fld > label {
  background: var(--navy);
  color: #fff;
  font-weight: bold;
  padding: 4px 8px;
  min-width: 74px;
  text-align: center;
  font-size: 12px;
}
.fld input[type=text], .fld input[type=date], .fld input[type=number],
.fld input[type=password], .fld input[type=month], .fld select, .fld textarea {
  border: 1px solid var(--btn-border);
  padding: 4px 6px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
}
.fld input:read-only { background: #eef0f6; }
.fld textarea.mail-input { font-family: "Consolas", "Yu Gothic UI", monospace; font-size: 12.5px; line-height: 1.5; }
.fld .mail-count { min-width: 60px; }
.mail-list { font-size: 11.5px; line-height: 1.5; }
.mail-list .cc { color: #555; }
.fld .code-input { width: 90px; }
.fld .name-display { min-width: 220px; background: #eef0f6; padding: 5px 6px; border: 1px solid var(--btn-border); min-height: 26px; }

/* 検索ボタン(虫眼鏡) */
.search-btn {
  padding: 3px 9px;
  background: linear-gradient(to bottom, #fff, #d8d8e0);
  border: 1px solid var(--btn-border);
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
}
.search-btn:hover { background: #fdf6d8; }

/* 汎用ボタン */
.btn {
  padding: 6px 18px;
  background: linear-gradient(to bottom, #ffffff, var(--btn-face) 45%, #d8d8e0);
  border: 1px solid var(--btn-border);
  border-radius: 3px;
  box-shadow: 1px 1px 2px rgba(0,0,0,.25);
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  color: #111;
  display: inline-block;
}
.btn:hover { background: #fdf6d8; }
.btn.primary { background: linear-gradient(to bottom, #dce8ff, #9fbcf0); border-color: var(--accent); }
.btn.danger { background: linear-gradient(to bottom, #ffe0e0, #f0a8a8); border-color: #c06060; }
.btn.print { background: linear-gradient(to bottom, #e0ffe8, #a8e0b8); border-color: #4c9a60; }
.btn.gmail { background: linear-gradient(to bottom, #fde8e6, #f4b8b2); border-color: #c5372c; color: #7a1a12; }
.btn.gmail:hover { background: #fff3d8; }

/* ---------- 一覧テーブル (Excel風ソート対応) ---------- */
.grid-wrap { overflow: auto; background: #fff; border: 1px solid var(--grid-line); }
table.grid {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
  font-size: 12.5px;
}
table.grid th {
  background: linear-gradient(to bottom, #eef1fa, #cfd5ea);
  border: 1px solid var(--grid-line);
  padding: 5px 8px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 2;
}
table.grid th:hover { background: #fdf6d8; }
table.grid th .sort-mark { color: var(--accent); font-size: 11px; margin-left: 3px; }
table.grid td {
  border: 1px solid var(--grid-line);
  padding: 4px 8px;
  white-space: nowrap;
  background: #fff;
}
table.grid tbody tr:nth-child(even) td { background: #eef1fa; }
table.grid tbody tr:hover td { background: #fdf6d8; }
table.grid tbody tr.selected td { background: #cce0ff; }
table.grid td.num { text-align: right; }
table.grid tfoot td { border: 1px solid var(--grid-line); padding: 5px 8px; background: #f5f5fa; font-weight: bold; white-space: nowrap; }
table.grid tfoot td.num { text-align: right; }

/* ---------- 検索モーダル ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-overlay.open { display: flex; }
.modal-win {
  width: 760px;
  max-width: 94vw;
  max-height: 84vh;
  background: var(--panel-light);
  border: 2px solid var(--navy);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 4px 16px rgba(0,0,0,.5);
}
.modal-title {
  background: linear-gradient(to bottom, #3a4a8c, var(--navy));
  color: #fff;
  font-weight: bold;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-title .close-x { cursor: pointer; padding: 0 6px; font-size: 15px; }
.modal-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.modal-search-row { display: flex; gap: 6px; }
.modal-search-row input { flex: 1; border: 1px solid var(--btn-border); padding: 6px 8px; font-size: 14px; }
.modal-result { flex: 1; overflow: auto; border: 1px solid var(--grid-line); background: #fff; min-height: 260px; max-height: 55vh; }
.modal-hint { color: #555; font-size: 11.5px; }

/* ---------- 明細グリッド ---------- */
.detail-grid input, .detail-grid select {
  width: 100%;
  border: 1px solid #ccc;
  padding: 3px 4px;
  font-size: 12.5px;
  font-family: inherit;
}
.detail-grid input.num { text-align: right; }
.detail-grid td.rowno { text-align: center; background: #eef1fa; }
.detail-grid tr.linked td.rowno { background: #d8f0d8; }

/* ---------- ツールバー・ページャ ---------- */
.toolbar { display: flex; gap: 8px; margin-bottom: 10px; align-items: center; flex-wrap: wrap; }
.pager { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.status-bar {
  background: var(--navy);
  color: #9fd0ff;
  padding: 3px 12px;
  font-size: 11.5px;
  text-align: right;
}
.total-box { background: #fff; border: 1px solid var(--btn-border); padding: 4px 12px; font-weight: bold; text-align: right; min-width: 120px; }
.err-msg { color: var(--red); font-weight: bold; }
.ok-msg { color: var(--green); font-weight: bold; }
/* ---------- クロス集計 ---------- */
table.grid.cross td.num { white-space: nowrap; }
table.grid.cross .plan { color: #c8760a; font-size: 11px; margin-left: 4px; }
table.grid.cross tbody td:first-child { position: sticky; left: 0; z-index: 1; }
table.grid.cross tfoot td:first-child { position: sticky; left: 0; }
.chk-label { display: inline-flex; align-items: center; gap: 5px; background: #fff8dc;
             border: 1px solid #c8a020; padding: 5px 10px; border-radius: 3px; }

/* ---------- 重複整理 ---------- */
.dup-group { border-left: 4px solid var(--red); }
.dup-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.dup-head .dup-amt { font-weight: bold; font-size: 15px; color: var(--navy); }
.dup-pick { display: flex; gap: 6px; align-items: center; }
.dup-pick .btn { padding: 3px 8px; font-size: 11px; }
.dup-pick .dup-stat { min-width: 210px; text-align: right; }

/* ---------- 通帳取込 ---------- */
table.grid tr.row-done td { background: #f2f7f2; color: #555; }
table.grid tr.row-skip td { background: #f2f2f2; color: #999; }
table.grid tr.row-done input, table.grid tr.row-skip input { background: transparent; border-color: #ddd; }

/* ---------- 経費精算 (レシート撮影) ---------- */
.keihi-capture { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.keihi-shot {
  flex: 1; min-width: 260px; max-width: 420px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 2px dashed var(--btn-border); border-radius: 8px; background: #fff;
  padding: 26px 16px; cursor: pointer; text-align: center;
}
.keihi-shot:hover { background: #fbfbff; border-color: var(--accent); }
.keihi-shot-icon { font-size: 44px; line-height: 1; }
.keihi-shot-text { font-weight: bold; color: #333; }
.keihi-shot-text small { font-weight: normal; color: #777; }
.keihi-file {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--btn-border); border-radius: 6px; background: #fff;
  padding: 10px 16px; cursor: pointer; white-space: nowrap;
}
.keihi-file:hover { background: #f2f2f8; }
.keihi-preview { margin-top: 12px; }
.keihi-preview img { max-width: 320px; max-height: 320px; border: 1px solid var(--btn-border); }
.keihi-cols { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.keihi-shot-box { width: 320px; flex: 0 0 auto; }
.keihi-img { max-width: 280px; max-height: 420px; border: 1px solid var(--btn-border); }
.keihi-ocr {
  max-height: 260px; overflow: auto; background: #f7f7fa; border: 1px solid var(--btn-border);
  padding: 6px; font-size: 11px; line-height: 1.5; white-space: pre-wrap; margin: 6px 0 0;
}
.keihi-sum { display: flex; gap: 24px; flex-wrap: wrap; }

/* スマホ・タブレットからの利用 (レシート撮影) */
@media (max-width: 820px) {
  .app-frame { min-width: 0; }
  .app-header, .side-menu, .memo-box, .info-box { display: none; }
  .app-body { display: block; }
  .content { width: 100%; }
  .content-inner { padding: 8px; }
  .keihi-cols { display: block; }
  .keihi-shot-box { width: auto; }
  .keihi-img, .keihi-preview img { max-width: 100%; }
  .frm-row { flex-wrap: wrap; }
  .fld { margin-bottom: 6px; }
  .fld input[type=text], .fld input[type=number], .fld select { font-size: 16px; }  /* iOSの自動ズーム防止 */
  .toolbar { flex-wrap: wrap; }
  .btn { padding: 10px 14px; }
  .grid-wrap { max-height: none; }
}

/* ---------- 交通費 (経路・距離) ---------- */
.kt-result {
  margin-top: 8px; padding: 8px 10px; border: 1px solid var(--btn-border);
  background: #fff; border-radius: 4px; line-height: 1.7;
}
.kt-result.ok { background: #f2f8f2; border-color: #6aa86a; }
.kt-result.err { background: #fdf3f2; border-color: #c88a84; }
.kt-result .kt-leg { font-size: 11.5px; color: #555; margin-left: 8px; }

/* ---------- 会計 (仕訳・試算表・決算) ---------- */
table.grid th.jl-dr, table.grid td.jl-dr { background: #f4f7ff; }
table.grid th.jl-cr, table.grid td.jl-cr { background: #fff7f2; }
table.grid tr.tb-group td { background: #e4e6f0; font-weight: bold; }
table.grid tr.tb-sub td { background: #f2f4fa; font-weight: bold; border-top: 1px solid var(--grid-line); }
table.grid.fin td.fin-item { padding-left: 22px; }
table.grid.fin tr.fin-chu td { background: #f2f4fa; font-weight: bold; }
table.grid.fin tr.fin-total td { background: #e8ecf8; font-weight: bold;
  border-top: 2px solid var(--navy); border-bottom: 2px solid var(--navy); }
.kessan-cols { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.kaikei-auto { display: flex; flex-direction: column; gap: 5px; }
.kaikei-auto .fld > label { background: #4a5a9c; }
#jGrid input[type=text], #jGrid input[type=number], #jGrid input[type=date] { border: 1px solid #c0c4d8; }
#jGrid .j-name { display: inline-block; min-width: 130px; color: #333; font-size: 12px; }
#jGrid tbody tr:focus-within td { background: #fffbe6; }

.kg-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.kg-head .btn { padding: 2px 8px; font-size: 11px; }
table.grid tr.row-sel td { background: #fff8dc; }

.ro-badge {
  background: #ffdf7f; color: #6a4b00; border: 1px solid #c8a020;
  border-radius: 3px; padding: 2px 10px; font-size: 11.5px; font-weight: bold;
  margin-right: 8px; white-space: nowrap;
}

/* ---------- 社印プレビュー ---------- */
.seal-preview {
  border: 1px solid var(--btn-border);
  background: repeating-conic-gradient(#f4f4f8 0% 25%, #fff 0% 50%) 50% / 12px 12px;
  padding: 8px;
  min-width: 120px;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- 添付ファイル ---------- */
.attach-drop {
  border: 2px dashed var(--btn-border);
  background: #fff;
  padding: 12px;
  text-align: center;
  border-radius: 4px;
  color: #555;
}
.attach-drop.over { border-color: var(--accent); background: #eef3ff; color: var(--accent); font-weight: bold; }
.attach-drop .btn { margin: 0 6px; }

/* ---------- エラーの対処ガイド ---------- */
.err-help { border: 2px solid var(--red); background: #fff; margin-bottom: 12px; }
.err-help .eh-title {
  background: linear-gradient(to bottom, #d94a3a, #b52d1e);
  color: #fff;
  font-weight: bold;
  padding: 6px 10px;
  font-size: 13.5px;
}
.err-help .eh-body { padding: 10px 12px; }
.err-help .eh-detail { line-height: 1.7; }

/* ---------- 一括処理 (チェックボックス選択) ---------- */
.bulk-bar {
  background: linear-gradient(to bottom, #eef1fa, #dce2f4);
  border: 1px solid var(--grid-line);
  padding: 6px 10px;
  margin-bottom: 8px;
}
.bulk-bar .bulk-count { font-weight: bold; }
.bulk-bar .bulk-count b { color: var(--accent); font-size: 15px; }
table.grid tbody tr.selected td { background: #cce0ff; }
.bulk-result {
  border: 2px solid var(--navy);
  background: var(--panel-light);
  margin-top: 10px;
  padding: 0 0 8px;
}
.bulk-result .bulk-head {
  background: linear-gradient(to bottom, #3a4a8c, var(--navy));
  color: #fff;
  padding: 6px 10px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.bulk-result .bulk-head span { font-size: 12.5px; }
.bulk-result .bulk-progress { height: 8px; background: #fff; border-bottom: 1px solid var(--grid-line); }
.bulk-result .bulk-progress > div { height: 100%; width: 0; background: linear-gradient(to right, #4a6ac0, #2b4bb5); transition: width .25s; }
.bulk-result .grid-wrap { border: none; }
.bulk-result .toolbar { padding: 0 10px; margin-bottom: 0; }

.badge { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 11px; font-weight: bold; border: 1px solid; }
.badge.open { background: #fff3d0; border-color: #c8a020; color: #7a5c00; }
.badge.done { background: #dff0df; border-color: #4c9a60; color: #14601f; }
.badge.part { background: #e0e8ff; border-color: #4a6ac0; color: #1a2a6c; }
.badge.cancel { background: #fde8e6; border-color: #c5372c; color: #7a1a12; }