/* 車番/選手番号表示用の共通スタイル */
.number-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2px;
}

.racer-box, .racer-number, .trio-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
}

/* 各車番の色 */
.racer-1, .trio-1 { background-color: #ffffff; color: #000; border: 1px solid #000; }
.racer-2, .trio-2 { background-color: #000000; }
.racer-3, .trio-3 { background-color: #ff0000; }
.racer-4, .trio-4 { background-color: #0000ff; }
.racer-5, .trio-5 { background-color: #ffff00; color: #000; }
.racer-6, .trio-6 { background-color: #00ff00; color: #000; }
.racer-7, .trio-7 { background-color: #ff8c00; }
.racer-8, .trio-8 { background-color: #ff00ff; }
.racer-9, .trio-9 { background-color: #9932cc; }

/* テーブル共通スタイル */
.table-responsive {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

.table {
    margin-bottom: 0;
    white-space: nowrap;
}

/* グレードバッジ */
.badge-gp { background-color: #FFD700; color: #000; }
.badge-g1 { background-color: #FF1493; color: #FFF; }
.badge-g2 { background-color: #0000FF; color: #FFF; }
.badge-g3 { background-color: #008000; color: #FFF; }
.badge-f1 { background-color: #FF4500; color: #FFF; }
.badge-f2 { background-color: #4169E1; color: #FFF; }

/* テーブルセルの基本設定 */
.table th, .table td {
    padding: 0.75rem;
    vertical-align: middle;
}

/* テーブルヘッダーの背景とテキストカラー */
.table-dark th {
    background-color: #343a40;
    color: white;
    text-align: center;
}

/* オッズ表示のスタイル */
.odds-inline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.popular-odds {
    font-weight: bold;
    color: #dc3545;
}

.racer-combo {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}

/* 終了マークのスタイル */
.race-finished-badge {
    display: inline-block;
    background-color: #28a745;
    color: white;
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-weight: bold;
}

/* オッズをクリック可能にするスタイル */
.clickable-odds {
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.clickable-odds:hover {
    background-color: rgba(0,123,255,0.1);
    border-radius: 4px;
}

.clickable-odds:active {
    background-color: rgba(0,123,255,0.2);
}

/* スタッツのハイライト色 */
.stat-max {
    background-color: rgba(0, 123, 255, 0.2); /* 薄い青色 */
}
.stat-min {
    background-color: rgba(220, 53, 69, 0.2); /* 薄い赤色 */
}

/* モバイル時の表示調整 */
@media (max-width: 575.98px) {
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    .card-header h5 {
        font-size: 1rem;
    }

    .table th, .table td {
        padding: 0.5rem;
    }
}