:root {
  --primary: #1a5fb4;
  --bg: #f7f8fa;
  --border: #d5d9e0;
  --danger: #c0392b;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  background: var(--bg);
  color: #222;
  font-size: 14px;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--primary);
  color: #fff;
  padding: 8px 16px;
}
.topbar a, .topbar .link { color: #fff; text-decoration: none; margin-left: 12px; }
.topbar .brand { font-weight: bold; font-size: 16px; margin-left: 0; }
.topbar nav { display: flex; align-items: center; }
button.link { background: none; border: none; cursor: pointer; font-size: 14px; padding: 0; }
/* 単一ボタン等をテキストの隣に並べるためのフォーム（<form>は既定でdisplay:blockのため改行される） */
form.inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; vertical-align: middle; }
main { max-width: min(1600px, 96vw); margin: 16px auto; padding: 0 12px; }
h1 { font-size: 20px; }
h2 { font-size: 16px; border-left: 4px solid var(--primary); padding-left: 8px; }
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
}
table.grid { border-collapse: collapse; width: 100%; }
table.grid th, table.grid td {
  border: 1px solid var(--border);
  padding: 4px 6px;
  text-align: left;
  vertical-align: top;
}
table.grid th { background: #eef1f5; white-space: nowrap; }
input, select, textarea {
  font: inherit;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
input.time { width: 70px; }
input.wide { width: 100%; }
textarea { width: 100%; }
.itin-time-sub { font-size: 11px; color: #777; white-space: nowrap; margin: 2px 0; }
/* 食事タブの評価関連入力欄（都市・評価7項目・乗車場距離・女子トイレ・資料添付・コメント）。
   項目ごとにグループ化してflex-wrapで折り返すことで、横に間延びして見づらかったUIを改善する */
.meal-eval-grid {
  display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 8px 0; padding: 10px;
  background: #fafbfc; border: 1px solid var(--border); border-radius: 4px;
}
.meal-eval-group { display: flex; flex-direction: column; gap: 4px; }
.meal-eval-group label { font-size: 11px; color: #777; }
.meal-eval-group-wide { flex: 1 1 100%; }
.meal-eval-group-wide input { width: 100%; }
/* プルダウンの代わりのクリックして選ぶボタン群（実体はラジオボタン。評価7項目・乗車場距離・
   女子トイレ・資料添付で使用）。ボックスラベル全体がクリック領域なので狭いプルダウンより選びやすい */
.rating-choice { display: flex; flex-wrap: wrap; gap: 4px; }
.rating-choice-opt { position: relative; cursor: pointer; }
.rating-choice-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rating-choice-opt span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 6px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 4px; background: #fff;
  font-size: 12px; color: #333; white-space: nowrap;
}
.rating-choice-opt input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: bold; }
.rating-choice-opt input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 1px; }
.rating-choice-clear span { color: #999; }
button.btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
}
button.btn.secondary { background: #6c757d; }
button.btn.danger { background: var(--danger); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.tabs a {
  padding: 6px 12px;
  background: #e2e6ec;
  border-radius: 4px 4px 0 0;
  text-decoration: none;
  color: #222;
}
.tabs a.active { background: var(--primary); color: #fff; }
.notice { background: #e8f4e8; border: 1px solid #9c9; padding: 8px 12px; border-radius: 4px; margin-bottom: 12px; }
.error { background: #fbecec; border: 1px solid #d99; padding: 8px 12px; border-radius: 4px; margin-bottom: 12px; }
.muted { color: #777; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: #e2e6ec; }
.badge.ongoing { background: #d4edda; }
/* チップ区分バッジの役職別色分け。DR/GD/AS＝濃色（白文字）、TD/TA/LG＝同色相の淡色（濃文字）で、
   同じ役職グループだが同一区分ではないことが一目でわかるようにする */
.badge.tip-cat-dr { background: #1d4ed8; color: #fff; }
.badge.tip-cat-td { background: #bfdbfe; color: #1e3a8a; }
.badge.tip-cat-gd { background: #b45309; color: #fff; }
.badge.tip-cat-lg { background: #fde68a; color: #78350f; }
.badge.tip-cat-as { background: #15803d; color: #fff; }
.badge.tip-cat-ta { background: #bbf7d0; color: #14532d; }
.token-box { font-family: monospace; background: #222; color: #9f9; padding: 8px; border-radius: 4px; word-break: break-all; }
.count-hint { font-size: 11px; color: #999; }
.diff-old { background: #fbecec; text-decoration: line-through; }
.diff-new { background: #e8f4e8; font-weight: bold; }
tr.auto-row > td { background: #fff6da; }
tr.row-overflow > td { background: #fbdada; }
input[readonly], select[disabled] { background: #ececec; color: #666; }

.tip-entry { border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; margin-bottom: 12px; background: #fff; }
.tip-entry.tip-entry-new { border-style: dashed; background: #f7faf7; }
.tip-entry.tip-entry-through { border-left: 4px solid var(--primary); background: #f0f6ff; }
.tip-entry.tip-entry-mismatch { border-left: 4px solid var(--danger); }
.tip-entry.tip-entry-disabled { background: #f2f2f2; opacity: 0.7; }
.tip-entry.tip-entry-disabled .view-mode { text-decoration: line-through; text-decoration-color: #999; }
.tip-entry.tip-entry-disabled .tip-entry-actions { text-decoration: none; }
.tip-entry-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 24px; }
.tip-group { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.tip-group.tip-group-name, .tip-group.tip-group-time { min-width: 170px; }
.tip-group.tip-group-items { flex: 2 1 280px; }
.tip-group label { display: block; font-size: 12px; color: #666; margin-top: 6px; }
.tip-group label:first-child { margin-top: 0; }
.tip-group input:not([type="checkbox"]), .tip-group select { width: 100%; }
.tip-group input[type="checkbox"] { width: auto; flex: none; }
.tip-duration { font-size: 12px; font-weight: bold; color: var(--primary); margin: 2px 0; }
.tip-checks { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 4px; width: 100%; }
.tip-checks label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #222; margin: 0; text-align: left; width: 100%; }
.tip-group label.tip-check-row {
  display: flex; align-items: center; gap: 6px; text-align: left;
  font-size: 13px; color: #222; margin-top: 8px;
}
.tip-group label.tip-check-row input[type="checkbox"] { width: auto; margin: 0; }
.tip-entry-date { font-size: 13px; font-weight: bold; color: var(--primary); margin-bottom: 8px; }
.tip-result { font-weight: bold; white-space: nowrap; }
.tip-view-line { margin-bottom: 6px; line-height: 1.7; }
.tip-view-line .badge { margin-right: 4px; }
.tip-view-result { font-size: 15px; font-weight: bold; }
.tip-mismatch { background: #fbdada; border-radius: 4px; padding: 3px 6px; margin: -3px -6px; }
.tip-mismatch-badge {
  display: inline-block; background: var(--danger); color: #fff; font-size: 11px; font-weight: bold;
  padding: 1px 7px; border-radius: 10px; margin-left: 4px;
}
input.tip-mismatch-input, select.tip-mismatch-input { background: #fbdada; border-color: var(--danger); }
/* 保存は拒否せず注意喚起のみ行いたい場合の、danger（赤）より穏やかな警告色（黄/オレンジ系） */
.warn-badge {
  display: inline-block; background: #b8860b; color: #fff; font-size: 11px; font-weight: bold;
  padding: 1px 7px; border-radius: 10px; margin-left: 4px;
}
textarea.warn-input, input.warn-input { background: #fdf3d8; border-color: #b8860b; }
.tip-entry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.tip-entry-actions form.inline { display: flex; align-items: center; gap: 6px; margin: 0; }

dialog.tip-dup-dialog { border: 1px solid var(--border); border-radius: 6px; padding: 16px; max-width: 480px; width: 90vw; }
dialog.tip-dup-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.tip-dup-items { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 4px; padding: 8px; margin: 8px 0; }
.tip-dup-item { display: block; padding: 3px 0; font-size: 13px; }

dialog.rate-edit-dialog { border: 1px solid var(--border); border-radius: 6px; padding: 16px; max-width: 480px; width: 90vw; max-height: 85vh; overflow-y: auto; overflow-x: hidden; }
dialog.rate-edit-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.rate-receipt-block { border: 1px dashed var(--border); border-radius: 4px; padding: 10px 12px; margin: 12px 0; background: #fafafa; }
.rate-receipt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0; }
.rate-receipt-row label { flex: 0 0 auto; font-size: 13px; white-space: nowrap; }
.rate-receipt-row input { flex: 1 1 80px; min-width: 0; max-width: 130px; }
.rate-calc-yen { font-weight: bold; font-size: 15px; }

@media print {
  .topbar, .tabs, .no-print { display: none !important; }
  body { background: #fff; font-size: 12px; }
  main { max-width: none; margin: 0; }
  .card { border: none; padding: 0; }
}