/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 23 2026 | 12:33:52 */
/**
 * リアルタイム競馬レースレポート - 追加スタイル
 * 動的ページ固有の要素用CSS
 *
 * 既存のrace-report-unified.cssを継承し、
 * 動的ページ固有の要素のみ定義
 */

/* ================================
   コントロールバー
   ================================ */
.realtime-control-bar {
    padding: 8px 0;
    margin-bottom: 5px;
}

.control-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 20px;
    flex-wrap: wrap;
}

/* ================================
   モード切り替えトグル
   ================================ */
.index-mode-switch {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mode-label {
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s, opacity 0.3s;
}

.mode-static-label {
    color: #9ca3af;
}

.mode-static-label.active {
    color: #374151;
    font-weight: bold;
}

.mode-realtime-label {
    color: #9ca3af;
}

.mode-realtime-label.active {
    color: #ea580c;
    font-weight: bold;
}

/* トグルスイッチ */
.toggle-switch {
    position: relative;
    width: 50px;
    height: 26px;
    display: inline-block;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d1d5db;
    border-radius: 26px;
    transition: 0.3s;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

input:checked + .toggle-slider {
    background-color: #fb923c;
}

input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

input:focus + .toggle-slider {
    box-shadow: 0 0 2px #fb923c;
}

/* ================================
   モード表示
   ================================ */
.current-mode-display {
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 13px;
}

#current-mode-label.mode-static {
    color: #374151;
    background: #f3f4f6;
}

#current-mode-label.mode-realtime {
    color: #ea580c;
    background: #ffedd5;
}

/* ================================
   更新コントロール
   ================================ */
.refresh-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.last-updated {
    font-size: 12px;
    color: #6b7280;
}

.refresh-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #fb923c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
    font-size: 14px;
    font-weight: bold;
}

.refresh-btn:hover:not(:disabled) {
    background: #f97316;
}

.refresh-btn:disabled {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
}

.refresh-icon {
    font-size: 18px;
}

/* ================================
   ローディングインジケーター
   ================================ */
.loading-indicator {
    display: none;
    align-items: center;
    gap: 8px;
    color: #2563eb;
    font-size: 14px;
}

.loading-indicator.active {
    display: flex;
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #2563eb;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ================================
   エラーメッセージ
   ================================ */
#error-message {
    display: none;
    background: rgba(231, 76, 60, 0.9);
    color: white;
    padding: 12px 20px;
    border-radius: 4px;
    margin: 10px 0;
    text-align: center;
}

.error-message {
    background: rgba(231, 76, 60, 0.9);
    color: white;
    padding: 12px 20px;
    border-radius: 4px;
    margin: 10px 20px;
    text-align: center;
}

/* ================================
   ローディングプレースホルダー
   ================================ */
.loading-placeholder {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
    font-size: 14px;
}

/* ================================
   データなしメッセージ
   ================================ */
.no-data {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

/* ================================
   エラー表示
   ================================ */
.error-display {
    text-align: center;
    padding: 40px 20px;
    color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
    border-radius: 8px;
    border: 1px solid #dc2626;
}

/* ================================
   エラー再試行ボタン
   ================================ */
.error-retry-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 24px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease;
}

.error-retry-btn:hover {
    background: #b91c1c;
}

.error-retry-btn:active {
    background: #991b1b;
}

/* エラーメッセージ内のボタン */
#error-message .error-retry-btn {
    display: block;
    margin: 10px auto 0;
    background: white;
    color: #dc2626;
    border: 2px solid white;
}

#error-message .error-retry-btn:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* エラーヒントテキスト */
.error-hint {
    font-size: 13px;
    color: #666;
    margin: 10px 0 5px;
}

/* ================================
   レスポンシブ対応
   ================================ */
@media (max-width: 768px) {
    .realtime-control-bar {
        padding: 8px 10px;
    }

    .control-bar-inner {
        gap: 8px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    /* モード表示をモバイルで非表示 */
    .current-mode-display {
        display: none;
    }

    /* ローディングインジケーターをコンパクトに */
    .loading-indicator span:last-child {
        display: none;
    }

    .index-mode-switch {
        gap: 6px;
        flex-shrink: 0;
    }

    .mode-label {
        font-size: 11px;
    }

    .toggle-switch {
        width: 36px;
        height: 20px;
    }

    .toggle-slider:before {
        height: 14px;
        width: 14px;
    }

    input:checked + .toggle-slider:before {
        transform: translateX(16px);
    }

    .refresh-control {
        gap: 6px;
        flex-shrink: 0;
    }

    .last-updated {
        font-size: 10px;
        white-space: nowrap;
    }

    .refresh-btn {
        padding: 6px 10px;
        font-size: 12px;
        gap: 4px;
    }

    .refresh-btn .refresh-text {
        display: none;
    }

    .refresh-icon {
        font-size: 16px;
    }
}

/* ================================
   フォント設定（コントロールバー用）
   ================================ */
.realtime-control-bar {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ================================
   横断検索セクション（追加スタイル）
   ================================ */
.cross-search-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #e5e7eb;
}

/* 横断検索 - 結果行のカーソル強調 */
#race-training-cross-search-app .v2-htv-filter-result-item {
    transition: background-color 0.15s ease;
}

#race-training-cross-search-app .v2-htv-filter-result-item:active {
    background-color: #dbeafe !important;
}

/* ================================
   抽出条件該当馬の横断検索
   （動的ページ専用 - クラス名を変更して競合回避）
   ================================ */
.realtime-condition-search {
    margin-bottom: 40px;
    padding: 20px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.realtime-condition-search h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.3em;
    color: #005ab3;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #dee2e6;
}

.realtime-condition-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.condition-search-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

.condition-search-row label {
    font-weight: 500;
    margin-right: 5px;
    font-size: 14px;
}

.condition-search-row label:first-child {
    font-weight: bold;
    min-width: 80px;
}

.condition-search-row input[type="radio"] {
    margin-right: 3px;
}

.condition-search-row input[type="number"] {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100px;
    font-size: 14px;
}

.condition-search-row select {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    font-size: 14px;
}

/* 入力コントロールグループ（抽出方法と同一行表示） */
.filter-input-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid #dee2e6;
}

.filter-input-group span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

#realtime-filter-button {
    padding: 10px 20px;
    font-size: 14px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

#realtime-filter-button:hover {
    background-color: #0056b3;
}

#realtime-search-results {
    margin-top: 15px;
}

#realtime-search-results-message {
    font-style: italic;
    color: #6c757d;
    text-align: center;
    padding: 20px;
}

#search-results-table {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

#search-results-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

#search-results-table th,
#search-results-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e9ecef;
    text-align: center;
}

#search-results-table th {
    background-color: #e9ecef;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

#search-results-table tbody tr:hover {
    background-color: #e9ecef;
}

#search-results-table .align-left {
    text-align: left;
}

#search-results-table .align-center {
    text-align: center;
}

/* 順位ハイライト */
#search-results-table .rank-1 {
    color: #d32f2f;
    font-weight: bold;
}

#search-results-table .rank-2 {
    color: #1976d2;
    font-weight: bold;
}

#search-results-table .rank-3 {
    color: #388e3c;
    font-weight: bold;
}

/* 低オッズハイライト */
#search-results-table .low-odds {
    color: #d32f2f;
    font-weight: bold;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .realtime-condition-search {
        padding: 15px;
    }

    .condition-search-row {
        flex-wrap: wrap;
    }

    .condition-search-row label:first-child {
        width: 100%;
        margin-bottom: 8px;
        padding-bottom: 5px;
        border-bottom: 1px solid #e9ecef;
    }

    /* ラジオボタンとラベルをインラインに保持 */
    .condition-search-row input[type="radio"] {
        margin-left: 0;
    }

    .condition-search-row label {
        margin-right: 8px;
        font-size: 13px;
    }

    /* 入力コントロールグループのモバイル対応（横並び維持） */
    .filter-input-group {
        margin-left: 8px;
        padding-left: 8px;
        flex-shrink: 0;
    }

    /* 入力ボックスをモバイルで小さく */
    .condition-search-row input[type="number"] {
        width: 80px;
        padding: 4px 6px;
        font-size: 13px;
    }

    #realtime-filter-button {
        width: 100%;
        margin-top: 10px;
    }

    #search-results-table {
        font-size: 12px;
    }

    #search-results-table th,
    #search-results-table td {
        padding: 6px 5px;
    }
}

/* ================================
   リアルタイムデータ未取得警告
   ================================ */
.realtime-warning {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.realtime-warning .warning-icon {
    font-size: 20px;
    color: #856404;
    flex-shrink: 0;
}

.realtime-warning .warning-text {
    color: #856404;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .realtime-warning {
        padding: 10px 12px;
    }

    .realtime-warning .warning-icon {
        font-size: 18px;
    }

    .realtime-warning .warning-text {
        font-size: 13px;
    }
}

/* ================================
   リアルタイムモード時のタブスタイル
   ================================ */
/* リアルタイムモード時のアクティブタブ（オレンジベース） */
/* IDセレクタで特異度を上げて確実にrace-report-unified.cssを上書き */
#realtime-race-report-container.index-mode-realtime .ability-tab-button.active {
    background-color: #ffedd5 !important;
    border-bottom-color: #ea580c !important;
    color: #ea580c !important;
}

/* リアルタイムモード時のタブホバー */
#realtime-race-report-container.index-mode-realtime .ability-tab-button:hover {
    background-color: #fff7ed !important;
}

/* ================================
   波乱度予想（ラベル+スライダー型2）
   ================================ */
.wave-prediction-ls2 {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding: 8px 0;
    margin-bottom: 6px;
}

.ls2-item {
    flex: 1;
    min-width: 0;
}

.ls2-label {
    font-size: 13px;
    margin-bottom: 6px;
    text-align: left;
}

.ls2-label-type {
    color: #666;
}

.ls2-label-value {
    font-weight: bold;
}

/* 単勝用ラベル色（緑・橙・赤橙） */
.ls2-label-value.tansho-level-1 { color: #43A047; }
.ls2-label-value.tansho-level-2 { color: #FB8C00; }
.ls2-label-value.tansho-level-3 { color: #E64A19; }

/* 3連複用ラベル色（緑・黄緑・橙・赤橙・紫） */
.ls2-label-value.sanrenp-level-1 { color: #43A047; }
.ls2-label-value.sanrenp-level-2 { color: #7CB342; }
.ls2-label-value.sanrenp-level-3 { color: #FB8C00; }
.ls2-label-value.sanrenp-level-4 { color: #E64A19; }
.ls2-label-value.sanrenp-level-5 { color: #9C27B0; }

.ls2-bar-wrapper {
    position: relative;
    height: 12px;
    background: linear-gradient(90deg, #E8F5E9 0%, #FFFDE7 40%, #FFF3E0 70%, #F3E5F5 100%);
    border-radius: 6px;
}

.ls2-slider {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: white;
    border: 3px solid #26A69A;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* 単勝用スライダー色（緑・橙・赤橙） */
.ls2-slider.tansho-level-1 { border-color: #43A047; }
.ls2-slider.tansho-level-2 { border-color: #FB8C00; }
.ls2-slider.tansho-level-3 { border-color: #E64A19; }

/* 3連複用スライダー色（緑・黄緑・橙・赤橙・紫） */
.ls2-slider.sanrenp-level-1 { border-color: #43A047; }
.ls2-slider.sanrenp-level-2 { border-color: #7CB342; }
.ls2-slider.sanrenp-level-3 { border-color: #FB8C00; }
.ls2-slider.sanrenp-level-4 { border-color: #E64A19; }
.ls2-slider.sanrenp-level-5 { border-color: #9C27B0; }

@media (max-width: 600px) {
    .wave-prediction-ls2 {
        gap: 12px;
        padding: 6px 0;
    }

    .ls2-item {
        min-width: 0;
        flex: 1;
    }

    .ls2-label {
        font-size: 11px;
    }

    .ls2-slider {
        width: 16px;
        height: 16px;
        border-width: 2px;
    }

    .ls2-bar-wrapper {
        height: 10px;
    }
}