/* ===== ベース ===== */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    font-size: 13px;
    color: #222;
    background: #f4f6f9;
    margin: 0;
    padding: 0;
}

a { color: #2a6db5; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== サイトナビ ===== */
.site-nav {
    background: #1a2b45;
    color: #fff;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.site-nav-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 44px;
    max-width: 1400px;
    margin: 0 auto;
}
.site-title {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    text-decoration: none;
    letter-spacing: 0.04em;
}
.site-title:hover { color: #8ecdf7; text-decoration: none; }
.nav-links {
    display: flex;
    gap: 4px;
}
.nav-admin {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.admin-status {
    font-size: 12px;
    color: #8ecdf7;
}
.admin-btn {
    font-size: 12px;
    padding: 4px 12px;
    border: 1px solid #4a7fb5;
    border-radius: 4px;
    color: #c8daf0;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.admin-btn:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }
.admin-btn-logout { border-color: #6a8fa8; color: #a0b8cc; }
.admin-btn-logout:hover { background: rgba(255,255,255,.1); color: #c8daf0; }
.admin-login-form {
    max-width: 300px;
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.admin-submit-btn {
    padding: 7px 20px;
    background: #1a2b45;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}
.admin-submit-btn:hover { background: #2a4a70; }
.nav-link {
    color: #c8daf0;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    transition: background .15s;
}
.nav-link:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.nav-active { background: rgba(255,255,255,.18); color: #fff; font-weight: bold; }

/* ===== ページコンテンツ ===== */
.page-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 16px 32px;
}

/* ===== ページヘッダ（タイトル＋パンくず） ===== */
.page-header {
    margin-bottom: 14px;
}
.page-header h1 {
    font-size: 18px;
    font-weight: bold;
    color: #1a2b45;
    margin: 8px 0 4px;
    padding-bottom: 6px;
    border-bottom: 2px solid #2a6db5;
    display: inline-block;
}
.breadcrumb {
    font-size: 12px;
    color: #888;
    margin-bottom: 2px;
}
.breadcrumb a { color: #2a6db5; }
.breadcrumb span { margin: 0 4px; color: #bbb; }

/* 戻るリンク（詳細ページ用） */
.back-link {
    display: inline-block;
    margin: 10px 0 6px;
    font-size: 12px;
    color: #2a6db5;
}
.back-link::before { content: '← '; }

/* ===== テーブル共通 ===== */
table {
    border-collapse: collapse;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
table, th, td {
    border: 1px solid #dde3ea;
}
th, td {
    padding: 4px 7px !important;
}
th {
    background: #e8edf4;
    color: #1a2b45;
    font-size: 0.78rem;
    font-weight: bold;
    white-space: nowrap;
}
tbody tr:hover { background: #f0f5fc; }
tbody tr:nth-child(even) { background: #fafbfd; }
tbody tr:nth-child(even):hover { background: #f0f5fc; }

/* 公式リンクアイコン */
.ext-icon { font-size: 13px; text-decoration: none; opacity: .7; }
.ext-icon:hover { opacity: 1; text-decoration: none; }

/* DataTable */
table.dataTable { width: auto !important; }

/* ===== ユーティリティ ===== */
.right  { text-align: right; }
.center { text-align: center; }
.nw     { white-space: nowrap; }
.ib     { display: inline-block; }
.detail { margin: 0.5rem 0; }
.data   { color: #bbb; margin: 0.5rem 0; }

.tables-row { white-space: nowrap; }
.odds-table {
    display: inline-block;
    margin-right: 10px;
    vertical-align: top;
}

/* ===== 着順バッジ ===== */
/* 着順バッジ（控えめな丸数字） */
.chakujun {
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    padding: 0 3px;
    border-radius: 50%;
    margin-left: 3px;
    vertical-align: middle;
    line-height: 1.6;
    opacity: 0.75;
}
.jun1 { background: #f5e090; color: #7a6000; border: 1px solid #d4b800; }
.jun2 { background: #b8d0ec; color: #1a4070; border: 1px solid #7aaad4; }
.jun3 { background: #e8d0b8; color: #7a4000; border: 1px solid #c09060; }

/* 着順セル背景（td に付与） */
.td-jun1 { background: #fffae8 !important; }
.td-jun2 { background: #dce8f5 !important; }
.td-jun3 { background: #fff4ec !important; }

/* ===== 枠番カラー ===== */
.waku1 { background: #f5f5f5; color: #000; }
.waku2 { background: #d8d8d8; color: #000; }
.waku3 { background: #f4b8b8; color: #000; }
.waku4 { background: #a8d8f0; color: #000; }
.waku5 { background: #f5f5a0; color: #000; }
.waku6 { background: #a8f0b8; color: #000; }

/* ===== 種別アイコン ===== */
.series-type {
    display: inline-block;
    width: 17px; height: 17px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
}
.series-type.is-morning  { background-image: url("https://www.boatrace.jp/static_extra/pc/images/icon_state1_1.png"); }
.series-type.is-summer   { background-image: url("https://www.boatrace.jp/static_extra/pc/images/icon_state1_2.png"); }
.series-type.is-nighter  { background-image: url("https://www.boatrace.jp/static_extra/pc/images/icon_state1_3.png"); }
.series-type.is-lady     { background-image: url("https://www.boatrace.jp/static_extra/pc/images/icon_state1_4.png"); height: 12px; }
.series-type.is-venus    { background-image: url("https://www.boatrace.jp/static_extra/pc/images/icon_state1_5.png"); height: 12px; }
.series-type.is-rookie__3rdadd { background-image: url("https://www.boatrace.jp/static_extra/pc/images/icon_state1_6.png"); }
.series-type.is-midnight { background-image: url("https://www.boatrace.jp/static_extra/pc/images/icon_state1_7.png"); }

/* ===== 日付ナビボタン ===== */
.nav-btn {
    display: inline-block;
    padding: 3px 12px;
    border: 1px solid #b0bfce;
    border-radius: 4px;
    background: #fff;
    text-decoration: none;
    color: #1a2b45;
    font-weight: bold;
    line-height: 1.8;
    transition: background .15s;
}
.nav-btn:hover { background: #e4eaf2; text-decoration: none; }

/* ===== 公式出走表リンク ===== */
.official-link {
    font-size: 10px;
    color: #1a6ebd;
    text-decoration: none;
    border: 1px solid #1a6ebd;
    border-radius: 3px;
    padding: 0 3px;
    white-space: nowrap;
}
.official-link:hover { background: #e8f0fb; }

/* ===== レース詳細 前後ナビ ===== */
.race-nav-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.race-nav-header h1 {
    margin: 0;
}
.race-nav-btn {
    white-space: nowrap;
    flex-shrink: 0;
}
.race-nav-btn.disabled {
    color: #aaa;
    border-color: #ddd;
    background: #f5f5f5;
    cursor: default;
    pointer-events: none;
}

/* ===== 確定オッズ列 ===== */
.confirmed-odds { white-space: nowrap; line-height: 1.6; }
.odds-label {
    display: inline-block;
    font-size: 10px;
    color: #999;
    width: 2em;
    text-align: right;
    margin-right: 3px;
}
.ninki     { font-size: 10px; color: #999; margin-left: 2px; }
.confirmed { font-size: 10px; color: #c00; margin-left: 4px; }
.sub       { font-size: 10px; color: #999; }
.mb        { font-size: 10px; color: #777; }
.fst-td    { white-space: nowrap; }

/* ===== 2連単オッズ ===== */
.niretan-odds {
    display: block;
    font-size: 10px;
    font-weight: bold;
    text-align: right;
    padding-top: 1px;
    background-color: #fff;
}

/* ===== レディース ===== */
.ladies { color: #e75480; font-weight: bold; vertical-align: middle; }

/* ===== 単勝オッズ ===== */
.tansho-odds { font-weight: bold; font-size: 0.9em; margin-left: 5px; }

/* ===== 級バッジ ===== */
.cls {
    display: inline-block;
    min-width: 2rem;
    padding: 0 5px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 11px;
    text-align: center;
    vertical-align: middle;
}
.A1 { background: #d94f30; color: #fff; }
.A2 { background: #e09020; color: #fff; }
.B1 { background: #7a5830; color: #fff; }
.B2 { background: #999;    color: #fff; }

/* ===== グレードバッジ ===== */
.grade {
    display: inline-block;
    height: 1.2rem;
    text-align: center;
    padding: 0 6px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 12px;
    line-height: 1.2rem;
    vertical-align: middle;
}
.is-ippan { background: #809BBA; color: #fff; }
.is-G3b   { background: #4a8fd4; color: #fff; }
.is-G2b   { background: #3070c0; color: #fff; }
.is-G1b   { background: #1a50a0; color: #fff; }
.is-SGa   { background: #d94f30; color: #fff; }
.is-lady  {}

/* ===== 人気カラー ===== */
td.ninki1,  span.ninki1  { background: #e68d79; }
td.ninki2,  span.ninki2  { background: #e6c479; }
td.ninki3,  span.ninki3  { background: #79e6c4; }
td.ninki4,  span.ninki4,
td.ninki5,  span.ninki5,
td.ninki6,  span.ninki6,
td.ninki7,  span.ninki7,
td.ninki8,  span.ninki8,
td.ninki9,  span.ninki9,
td.ninki10, span.ninki10 { background: #b9e8f2; }

/* ===== 選手ハイライト ===== */
td.player-highlight { outline: 4px solid #e63; background-color: #fff3e0 !important; }
td[data-player]:not([data-player=""]) { cursor: pointer; }