/* =========================================================
   Schedule Page ? FINAL CSS（確定版）
   ========================================================= */

/* -------------------------
   Page / Controls
------------------------- */
.schedule-page {
  padding: 16px;
}

.schedule-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* -------------------------
   Split Layout
------------------------- */
.schedule-split {
  display: flex;
  width: 100%;
}

/* 左：固定テーブル */
.schedule-left {
  flex: 0 0 auto;
  border-right: 1px solid #ccc;
  overflow-y: auto;
}

/* 右：ガント（横スクロール） */
.schedule-right {
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: auto;
  max-width: 100%;
  position: relative;
}

.schedule-right tbody tr {
  height: auto;
  /* JSで上書きされる前提 */
}

.schedule-right tbody td {
  height: 100%;
  box-sizing: border-box;
}

/* 右側：高さ指定が効くようにする */
.schedule-right table {
  table-layout: fixed;
}

.schedule-right td.col-gantt {
  height: auto;
  /* JSがpxで上書き */
  box-sizing: border-box;
}

/* -------------------------
   Table Base
------------------------- */
.schedule-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  width: auto;
  border-bottom: 1px solid #cfcfcf;
}

.fixed-table {
  width: auto;
}

/* -------------------------
   Header（左テーブル）
------------------------- */
.schedule-table thead th {
  background: #fff;
  border-bottom: 2px solid #bbb;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
}

/* 左ヘッダは高さを明示して揃える */
.schedule-left thead th {
  height: 20px;
  line-height: 20px;
  padding: 0 6px;
  /* 上下 padding を消す */
  vertical-align: middle;
}

/* 左テーブル：列境界（薄） */
.schedule-left th,
.schedule-left td {
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

/* 一番右（Status列）は線を消す */
.schedule-left th:last-child,
.schedule-left td:last-child {
  border-right: none;
}

/* 入金額列 非表示用 */
.hide-finance .col-finance {
  display: none;
}

/* .doposit_notification {
  font-size: 12px;
  padding-left: 16px;
} */

/* -------------------------
   Body Cells
------------------------- */
.schedule-table tbody td {
  padding: 4px 6px;
  line-height: 1.25;
  vertical-align: top;
  border-bottom: 1px solid #cfcfcf;
  background: #fff;
}

.schedule-table tbody {
  border-bottom: 1px solid #cfcfcf;
}

/* 行境界線は tr に一本だけ（左右統一） */
.schedule-table tbody tr {
  border-bottom: none;
}

/* Hover */
.schedule-table tbody tr:hover td {
  background: #fafafa;
}

/* -------------------------
   Column Widths（左）
------------------------- */
.col-issue {
  width: 140px;
  white-space: normal;
  /* 改行OK */
  word-break: break-word;
}

/* ガントと同じ色にする（既存の色コードを使う） */
.badge-bb {
    color: rgba(70, 130, 180, 0.45);
}

.badge-lottery {
    color: rgba(255, 140, 0, 0.7);
}

.badge-apply {
    color: rgba(34, 139, 34, 0.55);
}

.badge-listing {
    color: rgba(220, 20, 60, 0.85);
}

.col-firm {
  width: 100px;
  white-space: normal;
  /* 改行OK */
  word-break: break-word;
}

/* 主幹事 強調表示 */
.col-firm.lead {
  font-weight: bold;
  color: #c00;
}

.col-finance {
  width: 50px;
  text-align: right;
}

.col-prices {
  width: 90px;
}

.col-status {
  width: 170px;
}

/* -------------------------
   Prices（複数行）
------------------------- */
.col-prices>div {
  line-height: 1.3;
  white-space: nowrap;
}

/* -------------------------
   Status（コンパクト）
------------------------- */
.col-status label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 8px;
  margin-bottom: 0px;
  user-select: none;
}

.col-status select {
  width: 90px;
  font-size: 11px;
  height: 20px;
}

/* =========================================================
   Gantt
   ========================================================= */

/* ---- ガント共通寸法（ここだけ触れば全体変わる） ---- */
:root {
  --gantt-days: 45;
  --gantt-day-width: 24px;
  /* TODO 24pxにして、バーとマーカーの幅も調整する */
  --gantt-header-height: 20px;
  --gantt-width: calc(var(--gantt-days) * var(--gantt-day-width));
}

/* -------------------------
   Gantt Header（日付）
------------------------- */
.gantt-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  width: var(--gantt-width);
  height: var(--gantt-header-height);
  background: #fff;
  border-bottom: 2px solid #bbb;
}

.gantt-day {
  width: var(--gantt-day-width);
  height: var(--gantt-header-height);
  line-height: var(--gantt-header-height);
  text-align: center;
  font-size: 8px;
  white-space: nowrap;
  border-left: 1px solid #eee;
}

/* 土日 */
.gantt-day.sat {
  background: #d1ddff;
}

.gantt-day.sun {
  background: #ffe7e7;
}

/* -------------------------
   Gantt Table
------------------------- */
.gantt-table {
  width: var(--gantt-width);
}

.col-gantt {
  position: relative;
  width: var(--gantt-width);
  /* padding: 4px 6px; */
  overflow: hidden;

}

.col-gantt::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  margin-left: 1px;
  /* ヘッダーの border-left(1px) と起点を合わせるための描画補正 */
  background: repeating-linear-gradient(to right,
      transparent 0,
      transparent calc(var(--gantt-day-width) - 1px),
      rgba(0, 0, 0, 0.35) calc(var(--gantt-day-width) - 1px),
      rgba(0, 0, 0, 0.35) var(--gantt-day-width));

  opacity: 0.22;
  /* ここで薄さ調整（0.15?0.30） */
  z-index: 1;
}

/* バーは線より上 */
.gantt-bar,
.gantt-marker {
  position: absolute;
  z-index: 2;
}

/* -------------------------
   Gantt Bars
------------------------- */
.gantt-bar {
  top: 3px;
  height: calc(100% - 6px);
  /* 行のほぼ全高 */
  border-radius: 4px;
}

.gantt-bar.bb {
  background: rgba(70, 130, 180, 0.45);
}

.gantt-bar.apply {
  background: rgba(34, 139, 34, 0.55);
}

/* 抽選日 */
.gantt-marker.lottery {
  background: rgba(255, 140, 0, 0.7);
  /* darkorange */
}

/* Markers */
.gantt-marker {
  top: 3px;
  height: calc(100% - 6px);
  border-radius: 3px;
  width: calc(var(--gantt-day-width) - 6px);
  transform: translateX(3px);
  /* ← 左右を均等に */
}

/* 上場日 */
.gantt-marker.listing {
  background: rgba(220, 20, 60, 0.85);
  /* crimson */
}

/* 今日ライン本体 */
.schedule-right::before {
  content: "";
  position: absolute;
  top: var(--gantt-header-height);
  bottom: 0;
  /* 上から下まで貫通 */
  left: calc(var(--today-offset) + 6px);
  width: 2px;
  margin-left: 3.5px;
  background: rgba(220, 20, 60, 0.65);
  /* 落ち着いた赤 */
  pointer-events: none;
  z-index: 5;
  /* バーより上 */
}

/* OFFにしたい時はこれを有効化 */
/* 
.schedule-right::before{
  display: none;
} */

.legend-items {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.legend-swatch {
  display: inline-block;
}

/* 期間バー */
.legend-swatch.bb,
.legend-swatch.apply {
  width: 24px;
  height: 6px;
  border-radius: 3px;
}

/* 単日マーカー */
.legend-swatch.lottery,
.legend-swatch.listing {
  width: 3px;
  height: 12px;
}

/* ガントと同じ色指定（既存CSSと合わせる） */
.legend-swatch.bb {
  background: rgba(70, 130, 180, 0.45);
}

.legend-swatch.apply {
  background: rgba(34, 139, 34, 0.55);
}

.legend-swatch.lottery {
  background: rgba(255, 140, 0, 0.7);
}

.legend-swatch.listing {
  background: rgba(220, 20, 60, 0.85);
}

.legend-note {
  font-size: 12px;
  color: #666;
}




/* -------------------------
   Tablet
------------------------- */
@media (max-width: 1024px) {
  .schedule-page {
    padding: 12px;
  }
}

.repeat-header th,
.repeat-header td {
  background: #f7f7f7;
  border-top: 2px solid #ccc;
  border-bottom: 1px solid #ccc;
  font-weight: normal;
}

/* tr.repeat-header {
  border-bottom: 1px solid #ccc;
} */

/* -------------------------
   Repeat Header (途中ヘッダー)
------------------------- */
tr.repeat-header td {
  padding: 0 6px;
  line-height: 20px;
  vertical-align: middle;
}

/* 右側（ガント）の途中ヘッダーは padding を消して日付ヘッダーをそのまま表示 */
tr.repeat-header td.col-gantt {
  padding: 0;
}

.repeat-gantt-header {
  display: flex;
  flex-direction: row;
  width: var(--gantt-width);
  height: var(--gantt-header-height);
  background: #f7f7f7;
  /* border-bottom: 1px solid #ccc; */
}

/* 既存 .gantt-day を流用する */
.repeat-gantt-header .gantt-day {
  border-left: 1px solid #eee;
  writing-mode: horizontal-tb;
  /* 縦書き防止 */
  white-space: nowrap;
}


td.issue-continued {
  color: transparent;
  user-select: none;
}

tr.firm-boundary>td {
  border-top: 2px solid #888;
  /* 太線 */
}

/* 広告枠 */
/* .ad-banner {
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 12px;
  overflow: hidden;
} */

/* ダミー広告 */
/* .ad-dummy {
  background: repeating-linear-gradient(45deg,
      #e5e7eb,
      #e5e7eb 10px,
      #f3f4f6 10px,
      #f3f4f6 20px);
  color: #6b7280;
  font-size: 12px;
  border: 1px dashed #cbd5e1;
} */


.status-win {
  color: red;
}

.status-sub {
  color: #06740b;
}

.status-lose {
  color: blue;
}

/* 選択後の表示色（select側） */
select.status-win {
  color: red;
}

select.status-sub {
  color: #06740b;
}

select.status-lose {
  color: blue;
}

.info-for-smart-phone {
  display: none;
}

/* =========================
   Schedule accordion
========================= */

.schedule-description {
  margin: 24px 0 40px;
}

.accordion-toggle {
  width: 100%;
  background: #f3f6f9;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-toggle:hover {
  background: #e9eef3;
}

.accordion-icon {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.accordion-toggle[aria-expanded="true"] .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  margin-top: 8px;
}

.accordion-body {
  padding: 12px 16px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  line-height: 1.6;
}

.accordion-body h4 {
  margin: 12px 0 6px;
  font-size: 13px;
}

.accordion-note {
  margin-top: 12px;
  font-size: 13px;
  /* color: #666; */
}
/* =========================
   Schedule accordion (details)
========================= */

.schedule-description {
  margin: 24px 0 40px;
}

.accordion {
  border: 1px solid #d0d7de;
  border-radius: 6px;
  background: #fff;
}

.accordion-summary {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  background: #f3f6f9;
}

.accordion-summary::-webkit-details-marker {
  display: none;
}

.accordion-summary::after {
  content: "▼";
  float: right;
  font-size: 12px;
  transition: transform 0.2s ease;
}

.accordion[open] .accordion-summary::after {
  transform: rotate(180deg);
}

.accordion-body {
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.6;
}

.to-top {
  margin-left: 24px;
}

/* ===== レスポンシブ ===== */
/* 狭くなったら縦積み */
@media (max-width: 732px) {
  .col-issue {
    width: 72px;
    white-space: normal;
    /* 改行OK */
    word-break: break-word;
  }

  .col-firm {
    width: 50px;
    white-space: normal;
    /* 改行OK */
    word-break: break-word;
  }

  .col-prices {

    display: none;
  }

  .col-finance {
    display: none;
  }

  .show_deposit {
    display: none;
  }

  .info-for-smart-phone {
    display: flex;
    font-size: 12px;
    color: #666;
  }
  
  .doposit_notification{
    display: none;
  }

}