/* ===========================================================
   VARIABLES
=========================================================== */
:root {
  --gutter: 5px;
  --global-nav-h: 36px;

  --grid: #999;
  --grid-light: #ccc;
  --th-bg: #DDDDEE;

  --row-1: #eaf4ff;
  --row-3: #edf9ed;
  --xxl-pink: #f6c9d8;
}

/* ===========================================================
   RESET
=========================================================== */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ===========================================================
   GLOBAL NAV
=========================================================== */
.global-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  min-height: var(--global-nav-h);
  height: auto;
  padding: 4px 10px;

  display: flex;
  align-items: center;

  background: #fff;
  border-bottom: 2px solid #333;
  z-index: 1000;

  white-space: nowrap;
}

.global-nav-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  flex-wrap: nowrap;
}

.nav-title {
  white-space: nowrap;
  flex-shrink: 0;
}

.global-nav ul {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}

.global-nav li {
  list-style: none;
}

.global-nav a {
  color: #004488;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}

/* ===========================================================
   TEXT UTILITIES
=========================================================== */
.clip-cell {
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nowrap {
  white-space: nowrap;
}

/* ===========================================================
   NUMERIC / MONEY UTILITIES
=========================================================== */
.money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ===========================================================
   FORM BASE
=========================================================== */
input,
select,
textarea,
button {
  box-sizing: border-box;
}


/* ===========================================================
   PAGE FRAME
=========================================================== */
body.tours-index .tour-row-1 td {
  overflow: hidden;
}

body.tours-index main,
body.tours-index .page-wrap,
body.tours-index .page-body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* ===========================================================
   TOURS PAGE ROOT
=========================================================== */
.tours-page {
  position: fixed;
  top: var(--global-nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background: #fff;
  /* 以下を追加・確認 ースクロールしてしまう時に追記 */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* これで中身が左寄せになり、幅が死守されます */
}

.tours-table {
  /* これが「指定した幅を守る」ための最重要設定です */
  table-layout: fixed; 
    /* 罫線消失を防ぐための設定 */
  border-collapse: separate;
  border-spacing: 0;
  /* 全体の幅は「指定した各カラムの合計」に自動でなります */
  width: fit-content; 
}
/* ===========================================================
   FIXED HEADER AREA
=========================================================== */
.tours-sticky-shell {
  /* --- 固定の設定 --- */
  position: -webkit-sticky; /* Safari用 */
  position: sticky !important;
  top: 0;
  z-index: 1000;
  /* --- これがトドメの1行 --- */
  /* 自分自身が下まで引き伸ばされるのを防ぎ、固定を有効にします */
  align-self: flex-start;
  /* --- 既存の「幅を死守する」設定 --- */
  background: #fff;
  width: fit-content;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

.tours-fixed {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  background: #fff;
  z-index: 1001; /* shellより上に */
  border-bottom: 2px solid var(--divider-blue, #3A6EA5);
  /* 重要：中身のstickyを殺さない */
  overflow: visible !important;
}

/* --------------------------
   Title bar
--------------------------- */
/* NEW TOUR ボタンのスタイル */
.btn-new-tour {
  /* 文字を大きく・太く */
  font-size: 20px !important; 
  font-weight: bold;
  /* ボタンのデザイン */
  display: inline-block;
  padding: 10px 24px;
  background-color: #007bff; /* 青色 */
  color: #ffffff !important;
  text-decoration: none;
  border-radius: 6px;
  /* 位置の微調整（必要に応じて） */
  margin-bottom: 10px;
  transition: background-color 0.2s;
}

/* マウスを乗せたときの色 */
.btn-new-tour:hover {
  background-color: #0056b3;
  color: #ffffff;
}

.tours-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0 4px;
  box-sizing: border-box;
  background: #fff;
}

.tours-top-bar {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
  background: #fff;
  white-space: nowrap;
}
.tours-top-bar h2 {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  line-height: 24px;
  font-size: 20px;
  font-weight: 700;
}

.tours-top-bar h2 a {
  display: inline-block;
  margin: 0 0 0 12px;
  padding: 0;
  white-space: nowrap;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.tours-top-bar h2 a:hover {
  text-decoration: underline;
}

/* --------------------------
   Search area
--------------------------- */
.tours-search {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff; /* 重要：下の文字を隠すために白く塗る */
  /* 横幅いっぱいに白い帯を作る */
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 4px 70px 4px 0;
  box-sizing: border-box;
}

.tours-search form {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  line-height: 24px;
}
.tours-search form > * {
  flex: 0 0 auto;
  white-space: nowrap;
}

.tours-search label {
  display: inline-block;
  margin: 0 2px 0 0;
  font-size: 14px;
  white-space: nowrap;
  vertical-align: middle;
}

.tours-search input[type="text"],
.tours-search input[type="search"],
.tours-search input[type="number"],
.tours-search select {
  display: inline-block;
  width: auto;
  height: 24px;
  padding: 2px 4px;
  margin: 0 6px 0 0;
  box-sizing: border-box;
  font-size: 14px;
  border: 1px solid #999;
  border-radius: 0;
  vertical-align: middle;
  white-space: nowrap;
}

.tours-search input[name="id"] {
  width: 72px;
}

.tours-search input[name="ref_no"] {
  width: 150px;
}

.tours-search input[name="agt_code"] {
  width: 70px;
}

.tours-search input[name="hotel"] {
  width: 180px;
}

.tours-search input[type="submit"],
.tours-search button {
  display: inline-block;
  height: 24px;
  padding: 0 10px;
  margin: 0 6px 0 0;
  vertical-align: middle;
  font-size: 12px;
  cursor: pointer;
}

/* ===========================================================
   HEADER TABLE AREA */
.tours-header {
  margin: 0;
  padding: 0;
  background: #fff;
  /* 修正：hiddenを解除しないと、Stickyは絶対に効きません */
  overflow: visible !important; 
  /* 横幅を100%にせず、中身(テーブル)の幅に合わせる */
  width: fit-content; 
}

.tours-header th {
  position: sticky;
  top: 32px; /* 検索行の高さに合わせてください */
  z-index: 90;
  background: var(--th-bg);
  /* 文字が溢れても、指定した幅(width)を無理やり広げない設定 */
  word-wrap: break-word; 
  overflow: hidden;
  /* 罫線の復活設定 */
  border-bottom: 1px solid var(--grid);
  border-right: 1px solid var(--grid);
}
/* 一番左だけ左線を付ける */
.tours-header th:first-child {
  border-left: 1px solid var(--grid);
}
.tours-header-child {
  margin-top: 0;
}

.tour-header-table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  margin: 0;
}

/* ===========================================================
   TOP HORIZONTAL SCROLLBAR
=========================================================== */
.table-scroll-top {
  width: 100%;
  height: 0;              /* ←ここを変更 */
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0;
  padding: 0;
  background: #fff;
  border-top: none;       /* ←一旦消す */
  border-bottom: none;    /* ←一旦消す */
}

.table-scroll-top-inner {
  height: 1px;
}

/* ===========================================================
   SCROLL BODY
=========================================================== */
.tours-body {
  min-height: 0;
  overflow: visible; 
  margin: 0;
  padding: 0;
  background: #fff;
  width: 100%;
}

/* ===========================================================
   TOUR BLOCK
=========================================================== */
.tour-block,
.tour-block-pink {
  margin: 0;
  padding: 0;
}
/* 1. div（ブロック）自体に引いていた枠線は消し、-1px で上のブロックと重ねる */
.tour-block + .tour-block,
.tour-block + .tour-block-pink,
.tour-block-pink + .tour-block,
.tour-block-pink + .tour-block-pink {
  margin-top: -1px !important;
  border-top: none !important;
}
/* 境界線を落ち着いたローズピンクに変更 */
.tour-block + .tour-block table:first-child tr:first-child td,
.tour-block + .tour-block-pink table:first-child tr:first-child td,
.tour-block-pink + .tour-block table:first-child tr:first-child td,
.tour-block-pink + .tour-block-pink table:first-child tr:first-child td {
  border-top: 2px solid #F06292 !important;
}
.tours-body > .tour-block:first-child {
  border-top: 0;
}

/* XXL ツアー全体 */
.tour-block-pink td,
.xxl-tour td {
  background: var(--xxl-pink) !important;
}
/* ===========================================================
   TABLES IN BODY
=========================================================== */
.tours-body table,
.tour-block table,
.child-hotel,
.child-rmks,
.tour-header-table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}

.tours-body td,
.tours-body th {
  border: 1px solid var(--grid);
  padding: 2px 4px;
  font-size: 14px !important;
  line-height: 1.2;
  vertical-align: middle;
  min-width: 0;
}

/* ===========================================================
   ROW COLORS
   - 2行構成用
=========================================================== */
.row-1 td,
.data-row-1 td,
.parent-row-1 td,
.index-parent-row1 td {
  background: var(--row-1);
}

.row-3 td,
.data-row-3 td,
.child-row-1 td,
.index-child-hotel td {
  background: var(--row-3);
}

/* XXL 行 */
.xxl-row td,
.tr-hotel-xxl td {
  background: var(--xxl-pink) !important;
}

/* Cancelled 行 */
.tr-hotel-cancelled td,
.cancelled-row td {
  text-decoration: none;
  opacity: 1;
  background: #f3f3f3;
}
/* ===========================================================
   LINKS / TEXT
=========================================================== */
.tours-body a {
  text-decoration: none;
}

.tours-body a:hover {
  text-decoration: underline;
}

.nowrap {
  white-space: nowrap;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.left {
  text-align: left;
}

.num,
.money,
.rate,
.pax,
.nights {
  text-align: right;
  white-space: nowrap;
}

.code,
.short,
.date-cell,
.flight-cell {
  white-space: nowrap;
}

.remarks,
.rmks {
  white-space: pre-wrap;
  word-break: break-word;
}

/* ===========================================================
   CHILD HOTEL TABLES
=========================================================== */
.child-hotel {
  margin: 0;
}

.child-hotel td,
.child-hotel th,
.child-rmks td,
.child-rmks th {
  font-size: 13px;
}

.child-hotel + .child-hotel {
  margin-top: 0;
}

.child-hotel tr:first-child td {
  border-top-width: 1px;
}

/* ===========================================================
   FOCUS TARGET
=========================================================== */
.tour-focus-target {
  scroll-margin-top: 8px;
}

/* ===========================================================
   SCROLLBAR
=========================================================== */
.tours-body::-webkit-scrollbar {
  height: 12px;
  width: 12px;
}

.tours-body::-webkit-scrollbar-thumb {
  background: #bbb;
  border: 2px solid #eee;
}

.tours-body::-webkit-scrollbar-track {
  background: #eee;
}

/* ===========================================================
   SMALL VISUAL TUNING
=========================================================== */
.tours-header {
  box-shadow: inset 0 -2px 0 var(--divider-blue, #3A6EA5);
}
/* テーブルのヘッダーセル(TH)を1行に強制固定 */
.tour-header-table th {
  /* 1. 何があっても改行させない */
  white-space: nowrap !important;

  /* 2. 高さを一定に保つ（例：24pxなど、今の1行分の高さに合わせる） */
  line-height: 1.2;
  vertical-align: middle;

  /* 3. 重要：指定した幅(width)を維持するための設定 */
  box-sizing: border-box;
  
  /* テスト中のおすすめ：はみ出た文字をあえて「隠さない」 */
  /* 文字が隣のセルに突き抜けて見えれば、
     「あ、このカラムはあと5px足りないな」と一目で判断できます */
  overflow: visible; 
}
.tour-row-1 td:nth-child(5),
.tour-row-1 td:nth-child(7) {
  overflow: hidden;
}

.tour-row-1 {
  margin-top: 0;
  padding-top: 0;
}

.tours-header .tour-header-table:first-of-type,
.tour-row-1 {
  width: 205ch;
}

.tours-header-child .tour-header-table,
.tour-row-3 {
  width: 220ch;
}
body.tours-index .tours-body td,
body.tours-index .tours-body th {
  border-color: #1f8f3a;
}
/* テーブル間の意図しない隙間を消し、罫線を重ねる */
.tour-block {
  flex-direction: column;
  align-items: flex-start;
  gap: 0 !important; /* 要素間の隙間を強制的に0に */
  line-height: 0; /* 見えない空白文字の高さを潰す */
  /* 追加: アンカー(#tour-ID)で飛んできた際、固定ヘッダーの高さ分だけ上に余白を作る */
  scroll-margin-top: 180px;
}

.tour-block table {
  margin-bottom: 0 !important;
}

.tour-block table:last-child {
  margin-bottom: 0; /* 最後のテーブルは重ねる必要がないのでリセット */
}
/* 2つ目以降のテーブルを上に1px引っ張り上げて、罫線を重ねる */
.tour-block table + table {
  margin-top: -1px !important; 
}


/* ===========================================================
   TOURS FORM ONLY
   ※ NEW / EDIT 専用
   ※ 列幅は colgroup 絶対固定
=========================================================== */

body.tours-form {
  overflow-x: auto;
  overflow-y: hidden;
}

/* ===========================================================
   FORM SCROLL
=========================================================== */

/* 全体を1本だけ横スクロール */
.tour-form-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* ===========================================================
   FORM TABLE
=========================================================== */

/* colgroup優先 */
.form-parent-row1,
.child-hotel.form-table {
  table-layout: fixed !important;
  border-collapse: collapse;
  width: auto !important;
}

/* セル */
.form-parent-row1 th,
.form-parent-row1 td,
.child-hotel.form-table th,
.child-hotel.form-table td {
  padding: 2px 4px;
  white-space: nowrap;
  overflow: hidden;
}

/* ===========================================================
   INPUT / SELECT / TEXTAREA
=========================================================== */

/* 入力欄はセル内に収める */
.form-parent-row1 input[type="text"],
.form-parent-row1 input[type="date"],
.form-parent-row1 input[type="number"],
.form-parent-row1 select,
.form-parent-row1 textarea,
.child-hotel.form-table input[type="text"],
.child-hotel.form-table input[type="date"],
.child-hotel.form-table input[type="number"],
.child-hotel.form-table select,
.child-hotel.form-table textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* textarea */
.child-hotel.form-table textarea,
textarea.autoarea {
  resize: none;
  overflow: hidden;
}

/* checkbox */
.form-parent-row1 input[type="checkbox"],
.child-hotel.form-table input[type="checkbox"] {
  width: auto;
  max-width: none;
}

/* ===========================================================
   FORM ACTIONS
=========================================================== */

.form-actions {
  display: flex;
  gap: 20px;
  margin-top: 8px;
}

/* ===========================================================
   MONEY INPUT
=========================================================== */

.money-input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ===========================================================
   CANCEL / XXL
=========================================================== */

.big-checkbox {
  width: 22px;
  height: 22px;
  transform: scale(1.4);
  cursor: pointer;
}

.htl-cancel-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ===========================================================
   VALIDATION
=========================================================== */

.input-error {
  background-color: #ffe5e5 !important;
  border: 1px solid #cc0000 !important;
}

.date-error-msg {
  color: #cc0000;
  font-size: 12px;
  line-height: 1.2;
  margin-top: 2px;
  white-space: normal;
}

/* ===========================================================
   SMALL UTIL
=========================================================== */

.date-text {
  /* 3.2em から 100% に変更して、親のTD（7ch分）を使い切るようにします */
  width: 100% !important; 
  padding: 2px 2px !important; /* 左右の余白を削って文字を収める */
  text-align: center;
  font-family: 'Courier New', Courier, monospace; /* 等幅フォントにするとズレません */
}
/* ついでに、カレンダー用の入力欄（datepicker）も同じ幅感にします */
.datepicker {
  width: 100% !important;
  box-sizing: border-box;
}
/* Chrome / Edge / Safari */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/*



 */

/*# sourceMappingURL=application.css-7a5801b1b43d499830d648fffd77c6f30d21f958776443e4c5563ca2d88f20a4.map */