/* MALLINK テーブル統一CSS */

#main .table-wrapper {
  margin-bottom: 40px;
}

#main .table-scroll-hint {
  font-size: 13px;
  color: #888;
  text-align: center;
  margin-bottom: 6px;
  display: none;
}

/* ※HTML側で .table-container を使っていないなら、このまま“保険”として残してOK */
#main .table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

/* ========================================
   CMS table block: スクロールは .mls-tableScroll に委譲
   section 自体は overflow:visible（ツールバーを隠さない）

   スクロールチェーン:
     .main (min-width:0)
       → .mainBody (overflow-x:clip — スクロール箱にしない)
         → section.mls-block-table (overflow:visible)
           → .mls-tableScroll (overflow-x:auto ← 唯一のスクロール箱)
             → table.mls-table (width:max-content ← はみ出しOK)
======================================== */
#main section.mls-block-table {
  overflow: visible;
}

/* .mls-tableScroll が唯一のスクロールコンテナ
   ★ border-radius もここで一括指定。renderer_bridge.php が出力する
   唯一のラッパーなので、ここに入れれば全テーブルで角丸が効く。
   overflow-x:auto が角丸クリップを兼ねる。 */
#main .mls-tableScroll {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}

/* 角丸: コーナーセルに直接 border-radius を付与
   （border-collapse: separate なので有効） */
#main .mls-tableRound {
  display: inline-block;
  max-width: 100%;
  border-radius: 8px;
}

#main .mls-tableRound table.mls-table {
  border-radius: 8px;
}

/* 四隅のセル */
#main .mls-tableRound table.mls-table tr:first-child th:first-child,
#main .mls-tableRound table.mls-table tr:first-child td:first-child {
  border-top-left-radius: 8px;
}
#main .mls-tableRound table.mls-table tr:first-child th:last-child,
#main .mls-tableRound table.mls-table tr:first-child td:last-child {
  border-top-right-radius: 8px;
}
#main .mls-tableRound table.mls-table tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}
#main .mls-tableRound table.mls-table tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

/* ========================================
   デフォルトテーブルスタイル（旧common）
   - 影響範囲を CMS の table.mls-table に限定
======================================== */
#main table.mls-table {
  min-width: 600px;
  width: max-content;           /* ★ 中身に合わせる (旧 100%) */
  border-collapse: separate; border-spacing: 0;
  font-size: 14px;
  background-color: #fff;
  color: #333;
  border-radius: 8px;
  overflow: hidden;             /* セル背景を角丸でクリップ */
}

#main table.mls-table th,
#main table.mls-table td {
  padding: 12px 16px;
  white-space: nowrap;
  text-align: left;
}

#main table.mls-table th {
  background-color: #f5f5f5;
  font-weight: bold;
  color: #1c3264;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

#main table.mls-table th:first-child {
  border-left: 1px solid #ccc;
}

#main table.mls-table thead tr:first-child th {
  border-top: 1px solid #ccc;
}

/* caption */
#main table.mls-table caption {
  caption-side: top;
  text-align: left;
  padding: 8px 4px 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  position: relative;
}
#main table.mls-table caption::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  border-radius: 2px;
  background: #999;
}

/* caption 縦バー: テーマ別基調色 */
#main section.chuken  table.mls-table caption::before { background: #dd3333; }
#main section.navy    table.mls-table caption::before { background: #1c3264; }
#main section.mallink table.mls-table caption::before { background: #0d6b58; }
#main section.station table.mls-table caption::before { background: #7B2D26; }
#main section.claude  table.mls-table caption::before { background: #b45309; }

#main section.mls-block-table_json:not(.chuken):not(.navy):not(.mallink):not(.station):not(.claude) table:not(.mls-has-thead):not(.mls-no-header) tr:first-child td {
  background-color: #f5f5f5;
  font-weight: bold;
  color: #1c3264;
  border: 1px solid #ccc;
}

#main table.mls-table td {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

#main table.mls-table td:first-child {
  border-left: 1px solid #ccc;
}

#main table.mls-table tbody tr:first-child td {
  border-top: 1px solid #ccc;
}

/* thead がない場合、最初の行の td にも上ボーダー */
#main table.mls-table:not(.mls-has-thead):not(.mls-no-header) tr:first-child td {
  border-top: 1px solid #ccc;
}

#main table.mls-table tr:nth-child(even) td {
  background-color: #fafafa;
}

#main table.mls-table tbody tr:hover {
  background-color: #e8f9fd;
  transition: background-color 0.3s ease;
}

/* ========================================
   navy クラス（紺 + アクセントブルー系）
   --secondary-color: #1c3264 / --accent-blue: #6DCFF6
   chuken と同じ構造・洗練度で色系統だけ紺ベース
======================================== */

/* ラッパに角丸とシャドウ */

#main section.navy .mls-tableRound {
  box-shadow: 0 2px 10px rgba(28, 50, 100, 0.12);
  background: #fff;
}


/* テーブル本体 */
#main section.navy table.mls-table {
  border-collapse: separate; border-spacing: 0;
  font-size: 0.875rem;
  background: #fff;
}

/* ヘッダ行: 紺グラデーション */
#main section.navy th,
#main section.navy table:not(.mls-has-thead):not(.mls-no-header) tr:first-child td {
  background: linear-gradient(135deg, #1c3264, #2a4a8a);
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 1rem 0.75rem;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
#main section.navy th:last-child,
#main section.navy table:not(.mls-has-thead):not(.mls-no-header) tr:first-child td:last-child {
  border-right: none;
}

/* ボディ行 */
#main section.navy td {
  padding: 0.875rem 0.75rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  border-left: none;
  border-top: none;
  background-color: #fff;
  transition: background-color 0.3s ease;
}
#main section.navy td:last-child {
  border-right: none;
}

/* 偶数行: ほんのり青 */
#main section.navy tr:nth-child(even) td {
  background-color: #f5f8fc;
}

/* ホバー: アクセントブルー系 */
#main section.navy tbody tr:hover td {
  background-color: #edf6fe;
}
#main section.navy tbody tr:nth-child(even):hover td {
  background-color: #e2f0fb;
}

/* 第1列（項目名）: 紺寄りグレー強調 */
#main section.navy table.mls-col1 td:first-child {
  background-color: #eef1f6;
  font-weight: 600;
  text-align: left;
  color: #1c3264;
}
#main section.navy table.mls-col1 tbody tr:hover td:first-child {
  background-color: #dce4f0;
}

/* レスポンシブ */
@media (max-width: 768px) {
  #main section.navy table.mls-table {
    font-size: 0.75rem;
  }
  #main section.navy th,
#main section.navy table:not(.mls-has-thead):not(.mls-no-header) tr:first-child td {
    padding: 0.75rem 0.5rem;
  }
  #main section.navy td {
    padding: 0.625rem 0.5rem;
  }
}

/* ========================================
   highlighted クラス（強調表示）
======================================== */
#main section.highlighted table.mls-table {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#main section.highlighted th {
  background: linear-gradient(to right, #aee9f9, #a7dfb0);
  color: #fff;
  font-weight: bold;
  border-bottom: 2px solid #a7dfb0;
  border: none; /* デフォルトのborderを無効化 */
}

#main section.highlighted td {
  border-bottom: 1px solid #eee;
  border-left: none; /* デフォルトのborderを調整 */
  border-right: none;
  background-color: #fcfcfc;
  transition: background-color 0.3s ease;
}

#main section.highlighted tr:nth-child(even) td {
  background-color: #f4fafd;
}

#main section.highlighted tbody tr:hover td {
  background-color: #ebfaff;
}

#main section.highlighted td.status {
  font-weight: bold;
  border-left: 4px solid #ffe36e;
  background-color: #fffbe8;
  color: #7a5800;
}

/* ========================================
   flatmono クラス（フラット・モノトーン）
======================================== */
#main section.flatmono th {
  background-color: #f0f0f0;
  font-weight: 600;
  color: #000;
  border: 1px solid #e0e0e0;
}

#main section.flatmono td {
  border: 1px solid #e0e0e0;
  background-color: #ffffff;
}

#main section.flatmono tr:nth-child(even) td {
  background-color: #fafafa;
}

#main section.flatmono tbody tr:hover td {
  background-color: #eeeeee;
}

/* ========================================
   セル専用クラス（全テーブル共通）
   - 影響範囲を CMS の table.mls-table に限定
======================================== */
#main table.mls-table td.alert {
  background-color: #ffc107;
  color: red;
  font-weight: bold;
}

#main table.mls-table td.info {
  background-color: #6DCFF6;
  color: #1c3264;
}

#main table.mls-table td.success {
  background-color: #28a745;
  color: #fff;
  font-weight: bold;
}

#main table.mls-table td.warning {
  background-color: #ff9800;
  color: #000;
  font-weight: bold;
}

@media (max-width: 1023px){
  #main .mls-tableScroll > table.mls-table{
    min-width: 600px;
  }
}

/* ========================================
   chuken クラス（中検メイン — index.php デザイン準拠）
   - index.php の data-table デザインテイストを CMS ブロック向けに変換
   - ヘッダ: 赤グラデーション + 白文字
   - 行: 偶数行シマ + ホバー + 第1列強調
   - ラッパ: 角丸 + シャドウ
======================================== */

/* ラッパに角丸とシャドウ */

#main section.chuken .mls-tableRound {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background: #fff;
}


/* テーブル本体 */
#main section.chuken table.mls-table {
  border-collapse: separate; border-spacing: 0;
  font-size: 0.875rem;
  background: #fff;
}

/* ヘッダ行: 赤グラデーション */
#main section.chuken th,
#main section.chuken table:not(.mls-has-thead):not(.mls-no-header) tr:first-child td {
  background: linear-gradient(135deg, #dd3333, #e94545);
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 1rem 0.75rem;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
#main section.chuken th:last-child,
#main section.chuken table:not(.mls-has-thead):not(.mls-no-header) tr:first-child td:last-child {
  border-right: none;
}

/* ボディ行 */
#main section.chuken td {
  padding: 0.875rem 0.75rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  border-left: none;
  border-top: none;
  background-color: #fff;
  transition: background-color 0.3s ease;
}
#main section.chuken td:last-child {
  border-right: none;
}

/* 偶数行 */
#main section.chuken tr:nth-child(even) td {
  background-color: #f9f9f9;
}

/* ホバー */
#main section.chuken tbody tr:hover td {
  background-color: #f8f9fa;
}
#main section.chuken tbody tr:nth-child(even):hover td {
  background-color: #f0f0f0;
}

/* 第1列（項目名）: 強調 */
#main section.chuken table.mls-col1 td:first-child {
  background-color: #f1f3f4;
  font-weight: 600;
  text-align: left;
  color: #333;
}
#main section.chuken table.mls-col1 tbody tr:hover td:first-child {
  background-color: #e8eaed;
}

/* レスポンシブ */
@media (max-width: 768px) {
  #main section.chuken table.mls-table {
    font-size: 0.75rem;
  }
  #main section.chuken th,
#main section.chuken table:not(.mls-has-thead):not(.mls-no-header) tr:first-child td {
    padding: 0.75rem 0.5rem;
  }
  #main section.chuken td {
    padding: 0.625rem 0.5rem;
  }
}

/* ========================================
   mallink クラス（ティールグリーン — 落ち着いた上品さ）
   深緑〜エメラルド系。知的で信頼感のある印象。
======================================== */
#main section.mallink .mls-tableRound {
  box-shadow: 0 2px 10px rgba(13, 107, 88, 0.10);
  background: #fff;
}


#main section.mallink table.mls-table {
  border-collapse: separate; border-spacing: 0;
  font-size: 0.875rem;
  background: #fff;
}

#main section.mallink th,
#main section.mallink table:not(.mls-has-thead):not(.mls-no-header) tr:first-child td {
  background: linear-gradient(135deg, #0d6b58, #0f8a6f);
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 1rem 0.75rem;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
#main section.mallink th:last-child,
#main section.mallink table:not(.mls-has-thead):not(.mls-no-header) tr:first-child td:last-child { border-right: none; }

#main section.mallink td {
  padding: 0.875rem 0.75rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  border-left: none;
  border-top: none;
  background-color: #fff;
  transition: background-color 0.3s ease;
}
#main section.mallink td:last-child { border-right: none; }

#main section.mallink tr:nth-child(even) td {
  background-color: #f4faf8;
}

#main section.mallink tbody tr:hover td {
  background-color: #e6f5f0;
}
#main section.mallink tbody tr:nth-child(even):hover td {
  background-color: #d5ede5;
}

#main section.mallink table.mls-col1 td:first-child {
  background-color: #edf5f2;
  font-weight: 600;
  text-align: left;
  color: #0d6b58;
}
#main section.mallink table.mls-col1 tbody tr:hover td:first-child {
  background-color: #d5ede5;
}

@media (max-width: 768px) {
  #main section.mallink table.mls-table { font-size: 0.75rem; }
  #main section.mallink th,
#main section.mallink table:not(.mls-has-thead):not(.mls-no-header) tr:first-child td { padding: 0.75rem 0.5rem; }
  #main section.mallink td { padding: 0.625rem 0.5rem; }
}
/* ========================================
   station クラス（ブリックレッド — 重厚で落ち着いた赤）
   レンガ色〜ダークレッド系。chukenの明るい赤とは対照的な深みのある印象。
======================================== */
#main section.station .mls-tableRound {
  box-shadow: 0 2px 10px rgba(123, 45, 38, 0.12);
  background: #fff;
}


#main section.station table.mls-table {
  border-collapse: separate; border-spacing: 0;
  font-size: 0.875rem;
  background: #fff;
}

#main section.station th,
#main section.station table:not(.mls-has-thead):not(.mls-no-header) tr:first-child td {
  background: linear-gradient(135deg, #7B2D26, #993B32);
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 1rem 0.75rem;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
#main section.station th:last-child,
#main section.station table:not(.mls-has-thead):not(.mls-no-header) tr:first-child td:last-child { border-right: none; }

#main section.station td {
  padding: 0.875rem 0.75rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #e8d8d5;
  border-right: 1px solid #e8d8d5;
  border-left: none;
  border-top: none;
  background-color: #fff;
  transition: background-color 0.3s ease;
}
#main section.station td:last-child { border-right: none; }

#main section.station tr:nth-child(even) td {
  background-color: #fdf8f7;
}

#main section.station tbody tr:hover td {
  background-color: #f8efed;
}
#main section.station tbody tr:nth-child(even):hover td {
  background-color: #f2e5e2;
}

#main section.station table.mls-col1 td:first-child {
  background-color: #f8f0ee;
  font-weight: 600;
  text-align: left;
  color: #7B2D26;
}
#main section.station table.mls-col1 tbody tr:hover td:first-child {
  background-color: #f0e2de;
}

@media (max-width: 768px) {
  #main section.station table.mls-table { font-size: 0.75rem; }
  #main section.station th,
#main section.station table:not(.mls-has-thead):not(.mls-no-header) tr:first-child td { padding: 0.75rem 0.5rem; }
  #main section.station td { padding: 0.625rem 0.5rem; }
}
/* ========================================
   claude クラス（アンバー — 温かく親しみやすい）
   テラコッタ〜アンバー系。温もりと知性を兼ね備えた印象。
======================================== */
#main section.claude .mls-tableRound {
  box-shadow: 0 2px 10px rgba(180, 83, 9, 0.08);
  background: #fff;
}


#main section.claude table.mls-table {
  border-collapse: separate; border-spacing: 0;
  font-size: 0.875rem;
  background: #fff;
}

#main section.claude th,
#main section.claude table:not(.mls-has-thead):not(.mls-no-header) tr:first-child td {
  background: linear-gradient(135deg, #b45309, #d97706);
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 1rem 0.75rem;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
#main section.claude th:last-child,
#main section.claude table:not(.mls-has-thead):not(.mls-no-header) tr:first-child td:last-child { border-right: none; }

#main section.claude td {
  padding: 0.875rem 0.75rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  border-left: none;
  border-top: none;
  background-color: #fff;
  transition: background-color 0.3s ease;
}
#main section.claude td:last-child { border-right: none; }

#main section.claude tr:nth-child(even) td {
  background-color: #fffbf5;
}

#main section.claude tbody tr:hover td {
  background-color: #fef3e2;
}
#main section.claude tbody tr:nth-child(even):hover td {
  background-color: #fdebd0;
}

#main section.claude table.mls-col1 td:first-child {
  background-color: #fef7ed;
  font-weight: 600;
  text-align: left;
  color: #92400e;
}
#main section.claude table.mls-col1 tbody tr:hover td:first-child {
  background-color: #fdebd0;
}

@media (max-width: 768px) {
  #main section.claude table.mls-table { font-size: 0.75rem; }
  #main section.claude th,
#main section.claude table:not(.mls-has-thead):not(.mls-no-header) tr:first-child td { padding: 0.75rem 0.5rem; }
  #main section.claude td { padding: 0.625rem 0.5rem; }
}

/* ========================================
   L2 オプションクラス（"d" パネルのトグルで付与）
   全テーマより後に記述し、確実に上書きする
======================================== */

/* 1列目中央寄せ */
#main section table.mls-table.col1-center td:first-child {
  text-align: center;
}

/* TD中央寄せ（width:100%でセルに余白を確保し、中央寄せを可視化） */
#main section table.mls-table.td-center {
  width: 100%;
}
#main section table.mls-table.td-center td {
  text-align: center;
}

/* コンパクト */
#main section table.mls-table.compact th,
#main section table.mls-table.compact td {
  padding: 6px 10px;
}

/* 縞なし */
#main section table.mls-table.no-stripe tr:nth-child(even) td {
  background-color: transparent;
}
#main section table.mls-table.mls-col1.no-stripe td:first-child {
  background-color: transparent;
}

/* 枠線なし */
#main section table.mls-table.no-border th,
#main section table.mls-table.no-border td {
  border: none;
}