/*
Theme Name: Lightning Child
Template: lightning
*/

/* =========================
  共通
========================= */

body {
  padding-bottom:70px; /* 下部固定ボタンに隠れないように */
}

a {
  text-decoration:none;
}

/* =========================
  馬一覧
========================= */

.horse-list {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:15px;
  margin-top:20px;
}

.horse-card {
  border:1px solid #ddd;
  padding:15px;
  border-radius:10px;
  background:#fff;
  text-align:center;
  transition:0.2s;
}

.horse-card:hover {
  background:#f5f5f5;
}

/* =========================
  上部ナビ
========================= */

.global-nav-links {
  display:flex;
  gap:10px;
  padding:10px;
  background:#f5f5f5;
  justify-content:center;
}

.global-nav-links a {
  display:inline-block;
  padding:8px 12px;
  background:#333;
  color:#fff;
  border-radius:5px;
  font-size:14px;
}

.global-nav-links a:hover {
  background:#555;
}

/* =========================
  下部固定ナビ
========================= */

.global-bottom-links {
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:#fff;
  border-top:1px solid #ddd;
  padding:10px;
  display:flex;
  gap:10px;
  justify-content:center;
  z-index:999;
}

.global-bottom-links a {
  display:inline-block;
  padding:10px 15px;
  background:#333;
  color:#fff;
  border-radius:6px;
  font-size:14px;
}

/* =========================
  馬プロフィールカード
========================= */

.horse-profile-card{
  background:#fff;
  border:1px solid #ddd;
  border-radius:16px;
  padding:18px;
  margin:20px 0;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.horse-profile-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:12px;
}

.horse-profile-row-3{
  grid-template-columns:repeat(3,1fr);
}

.horse-traits{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:12px;
}

.profile-item,
.trait-box,
.horse-memo-box{
  background:#f8f8f8;
  border-radius:12px;
  padding:12px;
}

.profile-label{
  display:block;
  font-size:12px;
  color:#777;
  margin-bottom:5px;
}

.profile-value,
.trait-value{
  display:block;
  font-size:16px;
  font-weight:bold;
  color:#222;
}

.memo-content{
  font-size:15px;
  line-height:1.8;
  color:#333;
  white-space:pre-wrap;
}

/* =========================
  戦績サマリー
========================= */

.horse-summary{
  margin:15px 0 25px;
  padding:15px;
  background:#f7f7f7;
  border-radius:12px;
}

.horse-total-record{
  font-size:22px;
  font-weight:bold;
  margin-bottom:10px;
}

.horse-prize{
  font-size:20px;
  font-weight:bold;
  margin-bottom:10px;
}

.horse-record{
  font-size:16px;
  line-height:1.8;
}

.horse-record-table-wrap{
  overflow-x:auto;
  margin-top:15px;
}

.horse-record-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}

.horse-record-table th,
.horse-record-table td{
  border:1px solid #ddd;
  padding:10px;
  text-align:center;
}

.horse-record-table th{
  background:#f0f0f0;
  font-weight:bold;
}

/* =========================
  出走履歴・調教履歴テーブル
========================= */

.table-wrap{
  overflow-x:auto;
}

.result-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}

.result-table th,
.result-table td{
  border:1px solid #ddd;
  padding:10px;
  text-align:center;
}

.result-table th{
  background:#333;
  color:#fff;
}

/* =========================
  タブ
========================= */

.history-main-tabs,
.history-action-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:20px 0 12px;
}

.history-action-tabs{
  margin-top:30px;
  padding-top:18px;
  border-top:1px solid #ddd;
}

.history-main-tabs button,
.history-action-tabs button,
#race-tabs button{
  appearance:none;
  border:1px solid #ccc;
  background:#fff;
  color:#333;
  padding:9px 13px;
  border-radius:999px;
  cursor:pointer;
  font-size:14px;
  font-weight:bold;
  line-height:1.2;
  transition:0.2s;
}

.history-main-tabs button:hover,
.history-action-tabs button:hover,
#race-tabs button:hover{
  background:#f0f0f0;
}

.history-main-tabs button.active,
.history-action-tabs button.active,
#race-tabs button.active{
  background:#333;
  color:#fff;
  border-color:#333;
}

.tab-panel{
  margin-top:12px;
}

/* レースグレードタブ */
#race-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:10px 0 14px;
}

/* =========================
  入力フォーム
========================= */

.result-form,
.training-form,
.horse-edit-form{
  background:#fff;
  border:1px solid #ddd;
  border-radius:12px;
  padding:15px;
  margin-bottom:20px;
}

.result-form p,
.training-form p,
.horse-edit-form p{
  margin-bottom:14px;
}

.result-form input,
.result-form select,
.training-form input,
.training-form textarea,
.horse-edit-form input,
.horse-edit-form select,
.horse-edit-form textarea{
  width:100%;
  max-width:420px;
  padding:9px;
  border:1px solid #ccc;
  border-radius:8px;
  font-size:15px;
  box-sizing:border-box;
}

.result-form textarea,
.training-form textarea,
.horse-edit-form textarea{
  max-width:100%;
}

/* =========================
  ボタン
========================= */

.back-btn,
.add-btn{
  display:inline-block;
  padding:10px 15px;
  background:#333;
  color:#fff;
  border-radius:6px;
  border:none;
  cursor:pointer;
}

.add-btn{
  background:#28a745;
}

.add-btn:hover{
  background:#218838;
  color:#fff;
}

.back-btn:hover{
  background:#555;
  color:#fff;
}

.delete-btn,
.delete-horse-btn{
  background:#c00;
  color:#fff;
  border:none;
  border-radius:8px;
  cursor:pointer;
}

.delete-btn{
  padding:6px 12px;
  font-size:14px;
}

.delete-horse-btn{
  margin-top:20px;
  padding:12px 20px;
  font-size:16px;
}

.delete-btn:hover,
.delete-horse-btn:hover{
  background:#900;
}

/* =========================
  スマホ対応
========================= */

@media screen and (max-width:768px){

  .global-nav-links {
    flex-direction:column;
    align-items:center;
  }

  .global-nav-links a {
    width:90%;
    text-align:center;
  }

  .global-bottom-links {
    flex-direction:row;
  }

  .global-bottom-links a {
    width:45%;
    text-align:center;
  }

  .horse-profile-row,
  .horse-traits{
    grid-template-columns:1fr;
  }

  .horse-profile-row-3{
    grid-template-columns:repeat(3,1fr);
  }

  .horse-profile-row-3 .profile-item{
    padding:8px;
  }

  .horse-profile-row-3 .profile-value{
    font-size:14px;
  }

  .history-main-tabs,
  .history-action-tabs,
  #race-tabs{
    gap:6px;
  }

  .history-main-tabs button,
  .history-action-tabs button,
  #race-tabs button{
    font-size:13px;
    padding:8px 10px;
  }

  .result-table thead{
    display:none !important;
  }

  .result-table tr{
    display:block !important;
    margin-bottom:15px;
    border:1px solid #ddd;
    border-radius:10px;
    padding:10px;
    background:#fff;
  }

  .result-table td{
    display:flex !important;
    justify-content:space-between;
    gap:15px;
    padding:6px 0;
    border:none;
    text-align:right;
  }

  .result-table td::before{
    content:attr(data-label);
    font-weight:bold;
    color:#555;
    text-align:left;
  }

  .result-form input,
  .result-form select,
  .training-form input,
  .training-form textarea,
  .horse-edit-form input,
  .horse-edit-form select,
  .horse-edit-form textarea{
    max-width:100%;
  }

}

/* =========================
  基本情報・適性タブ
========================= */

.horse-info-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:18px 0 12px;
}

.horse-info-tabs button{
  appearance:none;
  border:1px solid #ccc;
  background:#fff;
  color:#333;
  padding:9px 16px;
  border-radius:999px;
  cursor:pointer;
  font-size:14px;
  font-weight:bold;
  line-height:1.2;
  transition:0.2s;
}

.horse-info-tabs button:hover{
  background:#f0f0f0;
}

.horse-info-tabs button.active{
  background:#333;
  color:#fff;
  border-color:#333;
}

.aptitude-title{
  margin-top:0;
  margin-bottom:14px;
  font-size:20px;
}

.aptitude-table-wrap{
  overflow-x:auto;
}

.aptitude-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}

.aptitude-table th,
.aptitude-table td{
  border:1px solid #ddd;
  padding:10px;
  text-align:center;
}

.aptitude-table thead th{
  background:#333;
  color:#fff;
}

.aptitude-table tbody th{
  background:#f5f5f5;
  font-weight:bold;
  width:34%;
}

.aptitude-table td{
  font-size:16px;
  font-weight:bold;
}

@media screen and (max-width:768px){

  .horse-info-tabs{
    gap:6px;
  }

  .horse-info-tabs button{
    font-size:13px;
    padding:8px 12px;
  }

  .aptitude-table th,
  .aptitude-table td{
    padding:8px;
    font-size:14px;
  }

}

/* =========================
  適性編集
========================= */

.aptitude-edit-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:15px;
}

@media screen and (max-width:768px){

  .aptitude-edit-grid{
    grid-template-columns:1fr;
  }

}

/* =========================
  調教履歴
========================= */

.training-history-table td{
  vertical-align:middle;
}

#training_type_other_wrap{
  margin-top:-6px;
}

/* =========================
  調教：適性上昇
========================= */

.training-aptitude-up-box{
  background:#f8f8f8;
  border:1px solid #ddd;
  border-radius:12px;
  padding:12px;
  margin:14px 0;
}

.training-aptitude-up-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:bold;
  cursor:pointer;
}

.training-aptitude-up-toggle input{
  width:auto !important;
  max-width:none !important;
}

.training-aptitude-up-items{
  margin-top:12px;
}

.training-aptitude-checkbox-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px 12px;
}

.training-aptitude-checkbox-grid label{
  display:flex;
  align-items:center;
  gap:6px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:8px;
  padding:8px;
  cursor:pointer;
}

.training-aptitude-checkbox-grid input{
  width:auto !important;
  max-width:none !important;
}

@media screen and (max-width:768px){

  .training-aptitude-checkbox-grid{
    grid-template-columns:repeat(2,1fr);
  }

}


/* =========================
  調教履歴：コンパクト表
========================= */

.training-history-table{
  min-width:760px;
  table-layout:auto;
}

.training-history-table th,
.training-history-table td{
  padding:7px 6px;
  font-size:13px;
  white-space:nowrap;
}

.training-history-table .training-col-name,
.training-history-table .training-col-feed,
.training-history-table .training-col-aptitude,
.training-history-table .training-col-memo{
  white-space:normal;
  min-width:90px;
}

.training-history-table .training-col-partner,
.training-history-table .training-col-result,
.training-history-table .training-col-week{
  width:58px;
}

@media screen and (max-width:768px){

  .table-wrap:has(.training-history-table){
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .training-history-table{
    min-width:720px;
  }

  .training-history-table thead{
    display:table-header-group !important;
  }

  .training-history-table tr{
    display:table-row !important;
    margin-bottom:0 !important;
    border:none !important;
    border-radius:0 !important;
    padding:0 !important;
    background:#fff;
  }

  .training-history-table th,
  .training-history-table td{
    display:table-cell !important;
    border:1px solid #ddd !important;
    padding:6px 5px !important;
    text-align:center !important;
    vertical-align:middle;
    font-size:12px;
    gap:0;
  }

  .training-history-table td::before{
    content:none !important;
  }

  .training-history-table .training-col-name,
  .training-history-table .training-col-feed,
  .training-history-table .training-col-aptitude,
  .training-history-table .training-col-memo{
    text-align:left !important;
    white-space:normal;
  }

}


/* =========================
  調教履歴：スマホ表崩れ修正版
  ※ result-table のスマホカード化を受けない専用テーブル
========================= */

.training-table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.sh4-training-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
  background:#fff;
  table-layout:auto;
}

.sh4-training-table th,
.sh4-training-table td{
  border:1px solid #ddd;
  padding:7px 6px;
  font-size:13px;
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
}

.sh4-training-table th{
  background:#333;
  color:#fff;
  font-weight:bold;
}

.sh4-training-table .training-col-name,
.sh4-training-table .training-col-feed,
.sh4-training-table .training-col-aptitude,
.sh4-training-table .training-col-memo{
  white-space:normal;
  text-align:left;
  min-width:90px;
}

.sh4-training-table .training-col-partner,
.sh4-training-table .training-col-result,
.sh4-training-table .training-col-week{
  width:58px;
}

@media screen and (max-width:768px){

  .training-table-wrap{
    overflow-x:auto !important;
    overflow-y:hidden;
  }

  .sh4-training-table{
    display:table !important;
    min-width:720px !important;
    width:720px !important;
    border-collapse:collapse !important;
  }

  .sh4-training-table thead{
    display:table-header-group !important;
  }

  .sh4-training-table tbody{
    display:table-row-group !important;
  }

  .sh4-training-table tr{
    display:table-row !important;
    margin:0 !important;
    border:none !important;
    border-radius:0 !important;
    padding:0 !important;
    background:#fff !important;
  }

  .sh4-training-table th,
  .sh4-training-table td{
    display:table-cell !important;
    border:1px solid #ddd !important;
    padding:6px 5px !important;
    text-align:center !important;
    vertical-align:middle !important;
    font-size:12px !important;
    line-height:1.35 !important;
    white-space:nowrap !important;
  }

  .sh4-training-table td::before{
    content:none !important;
    display:none !important;
  }

  .sh4-training-table .training-col-name,
  .sh4-training-table .training-col-feed,
  .sh4-training-table .training-col-aptitude,
  .sh4-training-table .training-col-memo{
    text-align:left !important;
    white-space:normal !important;
  }

}

/* =========================
  出走履歴：スマホ表形式
========================= */

.race-table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.sh4-race-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
  background:#fff;
  table-layout:auto;
}

.sh4-race-table th,
.sh4-race-table td{
  border:1px solid #ddd;
  padding:7px 6px;
  font-size:13px;
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
}

.sh4-race-table th{
  background:#333;
  color:#fff;
  font-weight:bold;
}

.sh4-race-table .race-col-name,
.sh4-race-table .race-col-memo{
  white-space:normal;
  text-align:left;
  min-width:110px;
}

.sh4-race-table .race-col-rank,
.sh4-race-table .race-col-popularity,
.sh4-race-table .race-col-week{
  width:46px;
}

.sh4-race-table .race-col-odds,
.sh4-race-table .race-col-limit{
  width:62px;
}

.sh4-race-table .race-col-prize{
  width:78px;
}

.sh4-race-table .race-col-delete{
  width:64px;
}

@media screen and (max-width:768px){

  .race-table-wrap{
    overflow-x:auto !important;
    overflow-y:hidden;
  }

  .sh4-race-table{
    display:table !important;
    min-width:760px !important;
    width:760px !important;
    border-collapse:collapse !important;
  }

  .sh4-race-table thead{
    display:table-header-group !important;
  }

  .sh4-race-table tbody{
    display:table-row-group !important;
  }

  .sh4-race-table tr{
    display:table-row !important;
    margin:0 !important;
    border:none !important;
    border-radius:0 !important;
    padding:0 !important;
    background:#fff !important;
  }

  .sh4-race-table th,
  .sh4-race-table td{
    display:table-cell !important;
    border:1px solid #ddd !important;
    padding:6px 5px !important;
    text-align:center !important;
    vertical-align:middle !important;
    font-size:12px !important;
    line-height:1.35 !important;
    white-space:nowrap !important;
  }

  .sh4-race-table td::before{
    content:none !important;
    display:none !important;
  }

  .sh4-race-table .race-col-name,
  .sh4-race-table .race-col-memo{
    text-align:left !important;
    white-space:normal !important;
  }

}


/* 初期レース行 */
.initial-race-row td{
  background:#fafafa;
}


/* =========================
  出走履歴：スマホ表表示 強制修正版
  - result-table のカード化を受けない
  - iPhoneで項目名が縦書き状に折れないよう列幅を固定
========================= */

.race-table-wrap{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch !important;
}

.race-table-wrap .sh4-race-table,
.sh4-race-table.race-history-table{
  display:table !important;
  width:880px !important;
  min-width:880px !important;
  max-width:none !important;
  table-layout:fixed !important;
  border-collapse:collapse !important;
  background:#fff !important;
}

.sh4-race-table thead{
  display:table-header-group !important;
}

.sh4-race-table tbody{
  display:table-row-group !important;
}

.sh4-race-table tr{
  display:table-row !important;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  border-radius:0 !important;
  background:#fff !important;
}

.sh4-race-table th,
.sh4-race-table td{
  display:table-cell !important;
  box-sizing:border-box !important;
  border:1px solid #ddd !important;
  padding:6px 5px !important;
  text-align:center !important;
  vertical-align:middle !important;
  font-size:12px !important;
  line-height:1.35 !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  white-space:nowrap !important;
}

.sh4-race-table th{
  background:#333 !important;
  color:#fff !important;
  font-weight:bold !important;
}

.sh4-race-table td::before{
  content:none !important;
  display:none !important;
}

.sh4-race-table .race-col-name{
  width:118px !important;
  min-width:118px !important;
  white-space:normal !important;
  word-break:keep-all !important;
  overflow-wrap:break-word !important;
  text-align:left !important;
}

.sh4-race-table .race-col-rank{
  width:46px !important;
  min-width:46px !important;
}

.sh4-race-table .race-col-popularity{
  width:40px !important;
  min-width:40px !important;
}

.sh4-race-table .race-col-odds,
.sh4-race-table .race-col-limit{
  width:62px !important;
  min-width:62px !important;
}

.sh4-race-table .race-col-prize{
  width:82px !important;
  min-width:82px !important;
}

.sh4-race-table .race-col-week{
  width:54px !important;
  min-width:54px !important;
}

.sh4-race-table .race-col-memo{
  width:180px !important;
  min-width:180px !important;
  white-space:normal !important;
  word-break:keep-all !important;
  overflow-wrap:break-word !important;
  text-align:left !important;
}

.sh4-race-table .race-col-delete{
  width:72px !important;
  min-width:72px !important;
}

@media screen and (max-width:768px){
  .race-table-wrap{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .race-table-wrap .sh4-race-table,
  .sh4-race-table.race-history-table{
    width:880px !important;
    min-width:880px !important;
  }

  .sh4-race-table th,
  .sh4-race-table td{
    font-size:11px !important;
    padding:5px 4px !important;
  }
}


/* =========================
  出走履歴テーブル 幅調整・メモ省略
========================= */

.race-table-wrap .sh4-race-table,
.sh4-race-table.race-history-table{
  width:650px !important;
  min-width:650px !important;
  table-layout:fixed !important;
}

.sh4-race-table .race-col-name{
  width:96px !important;
  min-width:96px !important;
  max-width:96px !important;
}

.sh4-race-table .race-col-rank{
  width:36px !important;
  min-width:36px !important;
  max-width:36px !important;
}

.sh4-race-table .race-col-popularity{
  width:34px !important;
  min-width:34px !important;
  max-width:34px !important;
}

.sh4-race-table .race-col-odds,
.sh4-race-table .race-col-limit{
  width:52px !important;
  min-width:52px !important;
  max-width:52px !important;
}

.sh4-race-table .race-col-prize{
  width:76px !important;
  min-width:76px !important;
  max-width:76px !important;
}

.sh4-race-table .race-col-week{
  width:46px !important;
  min-width:46px !important;
  max-width:46px !important;
}

.sh4-race-table .race-col-memo{
  width:150px !important;
  min-width:150px !important;
  max-width:150px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  text-align:left !important;
}

.sh4-race-table .race-col-delete{
  width:52px !important;
  min-width:52px !important;
  max-width:52px !important;
}

@media screen and (max-width:768px){
  .race-table-wrap .sh4-race-table,
  .sh4-race-table.race-history-table{
    width:650px !important;
    min-width:650px !important;
  }

  .sh4-race-table th,
  .sh4-race-table td{
    font-size:11px !important;
    padding:5px 3px !important;
  }
}

/* =========================
  馬情報編集内タブ
========================= */

.horse-edit-inner-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 16px;
  padding:8px;
  background:#f5f5f5;
  border-radius:12px;
}

.horse-edit-inner-tabs button{
  appearance:none;
  border:1px solid #ccc;
  background:#fff;
  color:#333;
  padding:9px 14px;
  border-radius:999px;
  cursor:pointer;
  font-size:14px;
  font-weight:bold;
  line-height:1.2;
  transition:0.2s;
}

.horse-edit-inner-tabs button:hover{
  background:#eee;
}

.horse-edit-inner-tabs button.active{
  background:#333;
  color:#fff;
  border-color:#333;
}

.horse-edit-inner-panel{
  margin-top:12px;
}

.initial-race-edit-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-bottom:10px;
}

.form-help-text{
  display:block;
  margin-top:5px;
  font-size:12px;
  color:#777;
  line-height:1.5;
}

.breaking-edit-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:12px 0 18px;
}

.breaking-check-item{
  display:flex;
  align-items:center;
  gap:6px;
  background:#f8f8f8;
  border:1px solid #ddd;
  border-radius:10px;
  padding:9px;
  font-size:14px;
}

.breaking-check-item input{
  width:auto !important;
  max-width:none !important;
}

@media screen and (max-width:768px){

  .horse-edit-inner-tabs{
    gap:6px;
    padding:6px;
  }

  .horse-edit-inner-tabs button{
    font-size:13px;
    padding:8px 12px;
  }

  .initial-race-edit-grid,
  .breaking-edit-grid{
    grid-template-columns:1fr;
  }

}

/* =========================
  ユーザー権限メッセージ
========================= */

.owner-only-notice{
  margin:24px 0;
  padding:16px;
  background:#fff7e6;
  border:1px solid #ffd591;
  border-radius:12px;
  color:#333;
}

.owner-only-notice p{
  margin:0 0 10px;
}

.owner-only-notice p:last-child{
  margin-bottom:0;
}

.login-btn{
  display:inline-block;
  padding:10px 15px;
  background:#333;
  color:#fff;
  border-radius:6px;
  font-weight:bold;
}

.login-btn:hover{
  background:#555;
  color:#fff;
}