/* 新川桂 社内アプリ 共通スタイル — DESIGN.md 準拠（Google Workspace 風・白基調ミニマル・ライトのみ） */

:root {
  --color-bg: #f6f8fc;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafd;
  --color-surface-3: #eef3fd;
  --color-border: rgba(60,64,67,.14);
  --color-divider: rgba(60,64,67,.10);
  --color-text: #202124;
  --color-text-muted: #5f6368;
  --color-text-faint: #80868b;
  --color-primary: #1a73e8;
  --color-primary-soft: rgba(26,115,232,.10);
  --color-green: #188038;
  --color-amber: #f29900;
  --color-red: #c5221f;

  --shadow-1: 0 1px 2px rgba(60,64,67,.08), 0 1px 3px 1px rgba(60,64,67,.06);
  --shadow-2: 0 2px 6px rgba(60,64,67,.12), 0 8px 24px rgba(60,64,67,.08);

  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.45rem, 1.18rem + 1vw, 2rem);

  --tr: 180ms cubic-bezier(.2,0,0,1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  line-height: 1.6;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- header (topbar) ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 28px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 32px; width: auto; }
.brand-name { font-weight: 500; color: var(--color-text); }
.topnav { display: flex; align-items: center; gap: 16px; }
.topnav a { color: var(--color-text-muted); font-weight: 500; }
.user-name { color: var(--color-text-faint); font-size: var(--text-xs); }
.logout-form { margin: 0; }

/* ---- layout ---- */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 28px 48px; flex: 1; }
/* ツアー編集など横幅を活かす画面（PC 1920想定） */
.container-wide { max-width: 1600px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.page-title { font-size: var(--text-xl); font-weight: 500; letter-spacing: -.01em; margin: 0 0 4px; }
.section-title { font-size: var(--text-lg); font-weight: 500; margin: 0 0 12px; }
.sub-title { font-size: var(--text-base); font-weight: 600; margin: 14px 0 8px; color: var(--color-text); }
.lead { color: var(--color-text-muted); margin-top: 0; }
.muted { color: var(--color-text-muted); font-size: var(--text-xs); }
.sep { border: none; border-top: 1px solid var(--color-divider); margin: 20px 0; }

/* ---- buttons (all pill 9999px) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 18px; border-radius: 9999px;
  font-family: inherit; font-size: var(--text-sm); font-weight: 500;
  cursor: pointer; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--shadow-1);
  transition: transform var(--tr), box-shadow var(--tr), filter var(--tr);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: var(--shadow-1); }
.btn-primary { background: var(--color-primary); border: none; color: #fff; padding: 0 20px; box-shadow: var(--shadow-2); }
.btn-primary:hover { filter: brightness(1.05); }
/* セカンダリ＝白ピル（旧・金茶は廃止） */
.btn-secondary { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); }
.btn-ghost { background: transparent; border: 1px solid var(--color-border); color: var(--color-text); box-shadow: none; }
.btn-ghost:hover { box-shadow: var(--shadow-1); }
.btn-block { width: 100%; }
.btn-small { height: 36px; padding: 0 14px; font-size: var(--text-xs); }
/* 危険（控えめ）: 白ピル + 赤文字 */
.btn-danger { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-red); }
.btn-danger:hover { background: rgba(197,34,31,.06); }

/* ---- cards / menu ---- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 16px; }
.menu-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px;
  padding: 22px; color: var(--color-text); box-shadow: var(--shadow-1);
  transition: transform var(--tr), box-shadow var(--tr);
}
.menu-card:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-2); }
.menu-card-title { font-weight: 600; font-size: var(--text-base); }
.menu-card-path { color: var(--color-text-muted); font-size: var(--text-xs); }
.menu-card-disabled { opacity: .55; }
.menu-card-disabled:hover { transform: none; box-shadow: var(--shadow-1); }
.menu-card-badge { align-self: flex-start; background: var(--color-surface-3); color: var(--color-text-muted); border-radius: 9999px; padding: 2px 10px; font-size: var(--text-xs); }

/* ---- generic card / panel ---- */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-1); }

/* ---- auth ---- */
.auth-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.auth-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px; padding: 32px; width: 100%; max-width: 380px; box-shadow: var(--shadow-1); }
.auth-logo { display: block; height: 44px; margin: 0 auto 16px; }
.auth-title { text-align: center; font-size: var(--text-lg); font-weight: 500; margin: 0 0 20px; }

/* ---- forms ---- */
.form { display: flex; flex-direction: column; gap: 16px; }
.form-narrow { max-width: 520px; }
.field { display: flex; flex-direction: column; gap: 6px; border: none; padding: 0; margin: 0; }
.field-label { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); }
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="number"], .field input[type="date"], .field input[type="time"],
.field select, .field textarea {
  padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 8px;
  font-size: var(--text-sm); font-family: inherit; background: var(--color-surface); color: var(--color-text);
}
/* フォーカス枠は全入力欄で primary の青に統一（DESIGN §6） */
input:focus, textarea:focus, select:focus,
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-soft);
}
.radio, .checkbox { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); padding: 4px 0; }
.form-actions { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.field-row { display: flex; gap: 16px; }
.field-row .field { flex: 1; }
/* 基本情報の4項目を1行に（内容に応じた幅配分・狭い画面で折り返し） */
.basics-row { flex-wrap: wrap; gap: 12px; }
.basics-row .field { flex-grow: 1; min-width: 0; }
.basics-row .f-date { flex-basis: 150px; }
.basics-row .f-time { flex-basis: 120px; }
.basics-row .f-num { flex-basis: 110px; }
.basics-row .f-toggle { flex-basis: 130px; }
.basics-row .f-toggle .toggle-row { gap: 8px; }
.req { color: var(--color-red); }

/* 出発地/到着地: 入力欄と「座標を取得」ボタンを横1列に並べる（ボタンは入力の右） */
.geo-input-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.geo-input-row .field { flex: 1 1 220px; min-width: 0; }
.geo-input-row .geo-btn { flex-shrink: 0; }

/* 基本情報パネルを縦にコンパクトに（DESIGN 余白規定の範囲で詰める・可読性は保つ） */
.form-compact { gap: 12px; }
.form-compact .field { gap: 4px; }
.form-compact .sub-title { margin: 6px 0 6px; }
.form-compact .geo-endpoint .addr-disp { margin: 4px 0; }
.form-compact .geo-results:empty { margin: 0; }

/* トグルを左・保存ボタンを右に並べる行 */
.save-row { justify-content: space-between; align-items: center; }

/* ---- toggle switch (§2-8) ---- */
.toggle-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: var(--text-sm); }
.toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; cursor: pointer; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: var(--color-border); border-radius: 9999px; transition: background var(--tr); }
.toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; bottom: 2px; background: #fff; border-radius: 50%; transition: transform var(--tr); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.toggle-switch input:checked + .toggle-slider { background: var(--color-primary); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }
.toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---- table ---- */
.table { width: 100%; border-collapse: collapse; margin-top: 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; font-size: var(--text-sm); }
.table th, .table td { text-align: left; padding: 9px 16px; }
.table th { background: var(--color-surface-2); color: var(--color-text-muted); font-weight: 600; font-size: 13px; }
.table td { border-bottom: .5px solid var(--color-divider); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--color-surface-2); }
.row-actions { white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.cell-muted { color: var(--color-text-muted); }

/* ---- chips / badges / dots ---- */
.chip { display: inline-block; background: var(--color-primary-soft); color: var(--color-primary); border-radius: 9999px; padding: 2px 10px; font-size: var(--text-xs); font-weight: 600; }
.badge { display: inline-block; background: var(--color-surface-3); color: var(--color-text-muted); border-radius: 9999px; padding: 1px 8px; font-size: var(--text-xs); font-weight: 600; }
.badge-admin { background: var(--color-primary-soft); color: var(--color-primary); }
.badge-ok { background: rgba(24,128,56,.10); color: var(--color-green); }
.badge-no { background: rgba(197,34,31,.10); color: var(--color-red); }
.badge-warn { background: rgba(242,153,0,.12); color: #b06000; }
.badge-start { background: rgba(24,128,56,.10); color: var(--color-green); }
.badge-end { background: var(--color-primary-soft); color: var(--color-primary); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-green { background: var(--color-green); }
.dot-amber { background: var(--color-amber); }
.dot-red { background: var(--color-red); }
.dot-primary { background: var(--color-primary); }

/* ---- alerts (控えめ・白背景+左ドット) ---- */
.alert { display: flex; align-items: center; gap: 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 12px 16px; font-size: 13px; margin: 12px 0; }
.alert::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.alert-info::before { background: var(--color-primary); }
.alert-error { color: var(--color-text); }
.alert-error::before { background: var(--color-red); }

/* ---- footer ---- */
.footer { display: flex; gap: 16px; justify-content: center; padding: 16px; color: var(--color-text-faint); font-size: var(--text-xs); border-top: 1px solid var(--color-border); background: var(--color-surface); }
.footer-auth { border: none; background: transparent; margin-top: 20px; }

/* ---- inline form (ボタンを行内に置く) ---- */
.inline-form { display: inline; margin: 0; }

/* ---- filter tabs (§2-4) 立ち寄りマスタの種別絞り込み ---- */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.filter-tab { height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--color-border); border-radius: 9999px; background: var(--color-surface); color: var(--color-text); font-size: var(--text-sm); font-weight: 500; box-shadow: var(--shadow-1); }
.filter-tab:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-2); }
.filter-tab.active { background: #e8f0fe; color: var(--color-primary); border-color: #c5d8f6; font-weight: 600; box-shadow: none; }

/* ---- filter bar (tour list) ---- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 12px 0 16px; padding: 14px 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px; box-shadow: var(--shadow-1); }
.filter-item { display: flex; flex-direction: column; gap: 4px; }
.filter-label { font-size: var(--text-xs); color: var(--color-text-muted); }
.filter-bar input[type="text"], .filter-bar input[type="date"], .filter-bar select { height: 44px; padding: 0 14px; border: 1px solid var(--color-border); border-radius: 9999px; font-size: var(--text-sm); font-family: inherit; background: var(--color-surface); }
.filter-actions { display: flex; gap: 8px; align-items: center; }

/* ---- geocoding / places ---- */
.geo-row { margin: 6px 0 10px; }
.geo-results { margin-top: 6px; }
.geo-loading, .geo-empty { font-size: var(--text-xs); color: var(--color-text-muted); margin: 4px 0; }
.geo-ok { font-size: var(--text-xs); color: var(--color-green); margin: 4px 0; }
.geo-list { list-style: none; padding: 0; margin: 6px 0; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.geo-list li { border-bottom: 1px solid var(--color-divider); }
.geo-list li:last-child { border-bottom: none; }
.geo-cand { display: block; width: 100%; text-align: left; background: var(--color-surface); border: none; padding: 8px 12px; cursor: pointer; font: inherit; }
.geo-cand:hover { background: var(--color-surface-2); }
.geo-cand-title { display: block; font-weight: 600; color: var(--color-primary); font-size: var(--text-sm); }
.geo-cand-sub { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.addr-disp { margin: 6px 0; font-size: var(--text-sm); color: var(--color-text); min-height: 1.2em; }
.geo-map { margin: 6px 0 4px; }
.geo-map iframe { width: 100%; height: 200px; border: 0; border-radius: 12px; }
/* ルート地図は縦を大きく（全体が見やすいように） */
.route-map iframe { height: 600px; }

/* ---- category icon ---- */
.cat-icon { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; color: var(--color-text-muted); opacity: .9; }

/* ================= tour builder (two-column integrated) ================= */
/* 右カラムを広め（約+200px）。左は残り幅。 */
.builder-layout { display: grid; grid-template-columns: minmax(0, 1fr) 680px; gap: 16px; align-items: start; }
@media (max-width: 1200px) { .builder-layout { grid-template-columns: 1fr; } }
.builder-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-1); }
.panel > .section-title { margin-bottom: 16px; }

/* ---- integrated itinerary ---- */
.itin { display: flex; flex-direction: column; }
.itin-row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 12px; padding: 12px 8px; border-bottom: .5px solid var(--color-divider); }
.itin-row:last-child { border-bottom: none; }
.itin-time { font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.5; white-space: nowrap; }
.itin-time .t-arr { color: var(--color-text); font-weight: 600; }
.itin-time .t-dep { color: var(--color-text-muted); }
.itin-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.itin-name { font-weight: 500; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; }
.itin-actions { display: flex; align-items: center; gap: 8px; }
.itin-terminal .itin-name { font-weight: 600; }

/* drag handle */
.drag-handle { cursor: grab; color: var(--color-text-faint); font-size: 1.1rem; user-select: none; padding: 0 2px; }
.itin-stop.dragging { opacity: .5; }
.itin.reordering .itin-travel { display: none; }

/* stay edit inline */
.stay-edit { display: flex; align-items: center; gap: 4px; }
.stay-edit .stay-input { width: 58px; height: 36px; padding: 0 8px; border: 1px solid var(--color-border); border-radius: 9999px; font-size: var(--text-sm); font-family: inherit; text-align: right; }
.stay-unit { font-size: var(--text-xs); color: var(--color-text-muted); }

/* travel (between stops) row — 控えめ */
.itin-travel { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; padding: 2px 8px; color: var(--color-text-muted); }
.itin-travel .travel-label { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--color-text-muted); }
.travel-arrow { width: 14px; height: 14px; color: var(--color-text-faint); }
.travel-need { color: var(--color-amber); }

/* add stop */
.add-stop-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.add-stop-form .pill-select { height: 44px; border-radius: 9999px; padding: 0 16px; background: var(--color-surface); border: 1px solid var(--color-border); display: flex; align-items: center; gap: 8px; min-width: 280px; }
.add-stop-form select { border: none; background: transparent; height: 100%; font-size: var(--text-sm); font-family: inherit; outline: none; font-weight: 500; cursor: pointer; flex: 1; }

/* ---- AI section ---- */
.ai-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.guide-text { width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 8px; font-family: inherit; font-size: var(--text-sm); line-height: 1.7; resize: vertical; }
.stop-guide { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-divider); gap: 8px; }
.stop-guide .field-label { display: flex; align-items: center; }
.guide-item { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.guide-item.stop-guide { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-divider); }
.guide-item .field-label { display: flex; align-items: center; }
.guide-item .form-actions { margin-top: 0; }

/* ---- modal (DESIGN §8) ---- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-overlay[hidden] { display: none; }
.modal-card { background: var(--color-surface); border-radius: 16px; padding: 22px; box-shadow: var(--shadow-2); width: 100%; max-width: 420px; }
.modal-title { font-size: var(--text-base); font-weight: 600; margin-bottom: 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---- toast (DESIGN §9) ---- */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 12px); z-index: 200; padding: 10px 20px; border-radius: 9999px; font-size: var(--text-sm); color: #fff; box-shadow: var(--shadow-2); opacity: 0; transition: opacity var(--tr), transform var(--tr); pointer-events: none; max-width: 90vw; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-success { background: var(--color-green); }
.toast-error { background: var(--color-red); }
.check-result { margin-top: 12px; }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.check-item { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--color-border); border-radius: 12px; padding: 12px 16px; background: var(--color-surface); }
.check-item .dot { margin-top: 6px; }
.check-body { flex: 1; min-width: 0; }
.check-head { display: flex; align-items: baseline; gap: 10px; }
.check-label { font-weight: 600; font-size: var(--text-sm); }
.check-sev { font-size: var(--text-xs); color: var(--color-text-muted); }
.check-comment { margin-top: 4px; font-size: 13px; color: var(--color-text); }
.check-item .check-body .check-comment:only-child { margin-top: 0; }
.mech-group { margin: 10px 0; }
.mech-label { font-weight: 600; font-size: var(--text-sm); margin-bottom: 6px; }
.mech-reason { margin: 4px 0; }