/* ==========================================================================
   ダークモードの上書き（layout/base.blade.php が Bootstrap の後に読む）

   テーマは <html data-bs-theme="light|dark"> で決まる（決め方は layout/base の head）。
   ライト時の見た目を変えないため、このファイルの規則はすべて
   [data-bs-theme=dark] の下に置く。

   Blade で色を直書きするときの決まり:
   - 白・灰・黒系の中立色は var(--sq-xxx, 元の値) と書く。--sq-* はダーク時だけ
     定義するので、ライト時は元の値がそのまま使われる。
       背景  --sq-surface（白）/ --sq-surface-2（ごく薄い灰）/ --sq-surface-3（薄い灰）
       文字  --sq-ink（黒〜濃い灰）/ --sq-ink-2（中間の灰）/ --sq-ink-3（薄い灰）
       線    --sq-line
       強調  --sq-hi（淡い黄色の強調セル）
   - 淡い色の背景（系統色・強調セルなど）は
       --tint:色;background-color:var(--tint-bg,var(--tint))
     と書く。ダーク時は下の [style*="--tint:"] が --tint-bg（暗い同系色）を定義する。
     インラインに !important が付いていても効くよう、背景色そのものは上書きしない。
   - 濃い色の文字（紺・茶など）は --fg:色;color:var(--fg-dark,var(--fg)) と書く。
   - 濃い色の背景に白文字（枠番・バッジ）はそのままでよい。
   - <style> ブロックで色を決めるクラスは、同じブロックに [data-bs-theme=dark] .クラス を足す。
   ========================================================================== */

[data-bs-theme=dark] {
    --sq-surface: var(--bs-body-bg);
    --sq-surface-2: var(--bs-tertiary-bg);
    --sq-surface-3: var(--bs-secondary-bg);
    --sq-ink: var(--bs-body-color);
    --sq-ink-2: var(--bs-secondary-color);
    --sq-ink-3: #8b939b;
    --sq-line: var(--bs-border-color);
    /* 強調セル（ライトの淡い黄色 #ffffcc など） */
    --sq-hi: color-mix(in srgb, #ffd43b 24%, var(--bs-body-bg));
}

/* 淡い色の背景を暗い同系色にする */
[data-bs-theme=dark] [style*="--tint:"] {
    --tint-bg: color-mix(in srgb, var(--tint) 22%, var(--bs-body-bg));
}

/* 淡い色は彩度が低く、混ぜるだけだとどれも灰色に寄って見分けられない。
   対応ブラウザでは色相を保ったまま明るさを 0.34 に固定し、彩度を 3 倍（上限 0.10）にする。
   クラスで決める淡色に同じ色が要るときは、この式で計算した値を直接書く */
@supports (color: oklch(from red l c h)) {
    [data-bs-theme=dark] [style*="--tint:"] {
        --tint-bg: oklch(from var(--tint) 0.34 min(calc(c * 3), 0.1) h);
    }
}

/* 濃い色の文字（淡い背景の上の紺・茶など）を明るい同系色にする。
   書き方は --fg:色;color:var(--fg-dark,var(--fg)) */
[data-bs-theme=dark] [style*="--fg:"] {
    --fg-dark: color-mix(in srgb, var(--fg) 35%, #fff);
}

/* --------------------------------------------------------------------------
   Bootstrap の固定色クラス（5.3 では data-bs-theme で変わらない）
   -------------------------------------------------------------------------- */
[data-bs-theme=dark] .bg-white {
    background-color: var(--bs-body-bg) !important;
}

[data-bs-theme=dark] .bg-light,
[data-bs-theme=dark] .text-bg-light {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* 黄・水色など明るい背景の上の text-dark は黒のまま */
[data-bs-theme=dark] .text-dark:not(.bg-warning):not(.bg-info):not(.text-bg-warning):not(.text-bg-info),
[data-bs-theme=dark] .text-black {
    color: var(--bs-body-color) !important;
}

[data-bs-theme=dark] .border-light {
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme=dark] .border-dark {
    border-color: #6c757d !important;
}

[data-bs-theme=dark] .btn-outline-dark {
    --bs-btn-color: #dee2e6;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #dee2e6;
    --bs-btn-hover-border-color: #dee2e6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #dee2e6;
    --bs-btn-active-border-color: #dee2e6;
}

/* 文字色のクラスは暗い背景で沈むので、Bootstrap のダーク用の明るい色にする */
[data-bs-theme=dark] .text-primary {
    color: var(--bs-primary-text-emphasis) !important;
}

[data-bs-theme=dark] .text-success {
    color: var(--bs-success-text-emphasis) !important;
}

[data-bs-theme=dark] .text-danger {
    color: var(--bs-danger-text-emphasis) !important;
}

[data-bs-theme=dark] .text-secondary {
    color: var(--bs-secondary-color) !important;
}

[data-bs-theme=dark] .table-light {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: var(--bs-secondary-bg);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-active-bg: var(--bs-secondary-bg);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-hover-bg: var(--bs-secondary-bg);
    --bs-table-hover-color: var(--bs-body-color);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* 色付きの表の行（5.3.0 では淡色のまま）。Bootstrap のダーク用の色に寄せる */
[data-bs-theme=dark] .table-warning,
[data-bs-theme=dark] .table-secondary {
    --bs-table-color: var(--bs-body-color);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-hover-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme=dark] .table-warning {
    --bs-table-bg: var(--bs-warning-bg-subtle);
    --bs-table-hover-bg: var(--bs-warning-border-subtle);
}

[data-bs-theme=dark] .table-secondary {
    --bs-table-bg: var(--bs-secondary-bg);
    --bs-table-hover-bg: var(--bs-tertiary-bg);
}

/* --------------------------------------------------------------------------
   public/css の独自クラス
   -------------------------------------------------------------------------- */
/* common.css: 表の白い区切り線と背景 */
[data-bs-theme=dark] .table {
    background-color: var(--bs-body-bg);
}

[data-bs-theme=dark] .table td,
[data-bs-theme=dark] .table th {
    border-right-color: var(--bs-body-bg);
    border-top-color: var(--bs-body-bg);
}

/* race_submenu.css: レースのサブメニュー */
[data-bs-theme=dark] .navbar-sub {
    background: linear-gradient(45deg, #2b3035, #343a40);
    border-bottom-color: var(--bs-border-color);
}

[data-bs-theme=dark] .navbar-nav .nav-link {
    color: #6ea8fe !important;
}

[data-bs-theme=dark] .navbar-nav .nav-link:hover {
    color: #9ec5fe !important;
}

[data-bs-theme=dark] .navbar-nav .nav-link::after {
    background-color: var(--bs-border-color);
}

[data-bs-theme=dark] .navbar-nav .nav-link:hover::after,
[data-bs-theme=dark] .navbar-nav .nav-link.active::after {
    background-color: #adb5bd;
}

[data-bs-theme=dark] .dropdown-menu .dropdown-item {
    color: #6ea8fe !important;
}

[data-bs-theme=dark] .dropdown-menu .dropdown-item:hover {
    background-color: var(--bs-secondary-bg);
    color: #9ec5fe !important;
}

[data-bs-theme=dark] .dropdown-menu .dropdown-item.active,
/* テーマ切替メニューの選択中の行はライトでも白文字（race_submenu.css の青文字 !important に負けるため）。
   このファイルで唯一ライトにも効く規則 */
.dropdown-menu [data-theme-value].active {
    color: #fff !important;
}

/* index.css: 本日開催のレース */
[data-bs-theme=dark] .idx-race-today {
    background-color: color-mix(in srgb, #ffc107 18%, var(--bs-body-bg));
}