/*
 * evtable.css — 新しい形式の期待値表（43機種・「ロックオン」タブがあるもの）を新デザインにそろえる
 *
 * これらのページは別アプリで自動生成されるので、生成されたHTMLには手を入れない。
 * base.html から全ページで読み込み、期待値表の外枠（.hihouden-scope）の中だけに効かせる。
 * 各ページの <style> の方が後に読み込まれるため、`html body .hihouden-scope` を頭に付けて
 * 詳細度（指定の強さ）で上書きする。色変数は `.hihouden-scope.hihouden-scope` と2回重ねて、
 * ページ側の `body.dark-mode .hihouden-scope` より強くしている。
 * 生成側で部品の名前（prem-input・chip 等）が変わったら、ここも合わせる。
 *
 * 色の意味: 青（プラス）は「機械割105%以上」、赤（マイナス）は「100%未満・期待値マイナス」だけに使う。
 * 選んでいる店舗・タブは黒（インク）、見出しは文字だけ（飾りの色線は使わない）。
 */

html body .hihouden-scope.hihouden-scope {
    --primary-tech: var(--ds-color-ink-2);
    --accent-blue: var(--ds-color-plus);
    --accent-emerald: var(--ds-color-plus);
    --accent-rose: var(--ds-color-minus);
    --bg-glass: var(--ds-color-surface);
    --card-bg: var(--ds-color-surface);
    --text-main: var(--ds-color-ink);
    --text-muted: var(--ds-color-ink-2);
    --border-soft: var(--ds-color-hairline);
    --radius-lg: var(--ds-radius-lg);
    --radius-sm: var(--ds-radius-md);
    --shadow-sm: var(--ds-shadow-card);

    font-family: var(--ds-font-sans);
    background: transparent;
}

/* ---------- 見出し ---------- */
html body .hihouden-scope .page-header {
    padding: 14px 52px 12px;
}

html body .hihouden-scope .page-title {
    font-size: var(--ds-text-title);
    font-weight: 700;
    color: var(--ds-color-ink);
    text-align: center;
}

/* ---------- カード ---------- */
html body .hihouden-scope .prem-card,
html body .hihouden-scope .info-box {
    border: 0;
    border-radius: var(--ds-radius-lg);
    background: var(--ds-color-surface);
    box-shadow: var(--ds-shadow-card);
}

html body .hihouden-scope .card-label {
    margin-bottom: var(--ds-space-2);
    padding-left: 0;
    border-left: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ds-color-ink-3);
}

/* ---------- 入力欄 ---------- */
html body .hihouden-scope .field-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-color-ink-3);
}

/* 入力欄の見た目は components.css の「テキストボックス」の決まりに従う（ここでは数字の幅をそろえるだけ） */
html body .hihouden-scope .prem-input {
    font-variant-numeric: tabular-nums;
}

html body .hihouden-scope .hint-text {
    font-size: var(--ds-text-cap);
    color: var(--ds-color-ink-3);
}

html body .hihouden-scope .lockon-border-type-option {
    font-size: var(--ds-text-sub);
    font-weight: 600;
}

html body .hihouden-scope .lockon-border-type-option input {
    accent-color: var(--ds-color-ink);
}

/* ---------- マイ店舗（選んでいる店舗は黒） ---------- */
html body .hihouden-scope .chip-group {
    scrollbar-width: none;
}

html body .hihouden-scope .chip-group::-webkit-scrollbar {
    display: none;
}

html body .hihouden-scope .chip {
    padding: 7px 12px;
    border: 0;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-control-bg);
    box-shadow: inset 0 0 0 1px var(--ds-control-line);
    color: var(--ds-control-ink);
    font-size: var(--ds-text-sub);
    font-weight: 600;
}

html body .hihouden-scope .chip.active {
    background: var(--ds-select-bg);
    box-shadow: inset 0 0 0 1px var(--ds-select-line);
    color: var(--ds-select-ink);
    font-weight: 700;
}

/* ---------- 期待値表 / ロックオン の切り替え ---------- */
html body .hihouden-scope .nav-prem-pills {
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: var(--ds-track-bg);
}

html body .hihouden-scope .nav-pill {
    padding: 8px;
    border-radius: var(--ds-radius-sm);
    color: var(--ds-color-ink-2);
    font-size: 14px;
    font-weight: 600;
}

html body .hihouden-scope .nav-pill.active {
    background: var(--ds-color-surface);
    color: var(--ds-color-ink);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--ds-select-line), 0 1px 3px rgba(16, 24, 40, 0.12);
}

/* ---------- 表の種類を選ぶ（天井期待値・ゾーン等） ---------- */
html body .hihouden-scope .ev-picker-toggle {
    min-height: 48px;
    border: 0;
    border-radius: var(--ds-radius-md);
    background: var(--ds-color-surface);
    color: var(--ds-color-ink);
    font-size: var(--ds-text-body);
    font-weight: 700;
    box-shadow: var(--ds-shadow-card), 0 0 0 1px var(--ds-color-hairline);
}

html body .hihouden-scope .ev-picker.open .ev-picker-toggle {
    border: 0;
    box-shadow: 0 0 0 1.5px var(--ds-color-accent), var(--ds-focus-ring);
}

html body .hihouden-scope .ev-picker-list-icon,
html body .hihouden-scope .ev-picker-chevron {
    color: var(--ds-color-ink-3);
}

html body .hihouden-scope .ev-picker-menu {
    border: 0;
    border-radius: var(--ds-radius-md);
    background: var(--ds-color-surface);
    box-shadow: var(--ds-shadow-float), 0 0 0 1px var(--ds-color-hairline);
}

html body .hihouden-scope .ev-picker-option {
    color: var(--ds-color-ink);
    font-size: 14px;
    font-weight: 600;
}

html body .hihouden-scope .ev-picker-option:hover,
html body .hihouden-scope .ev-picker-option:focus-visible {
    background: var(--ds-color-surface-sunken);
}

html body .hihouden-scope .ev-picker-option.active,
html body .hihouden-scope .ev-picker-check {
    color: var(--ds-color-ink);
    font-weight: 700;
}

html body .hihouden-scope .ev-picker-divider {
    color: var(--ds-color-ink-3);
    font-weight: 700;
}

/* ---------- 表 ---------- */
html body .hihouden-scope .prem-table-container {
    border: 0;
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-card);
}

html body .hihouden-scope .prem-table th,
html body .hihouden-scope .ev-panel table th {
    padding: 9px 2px;
    background: var(--ds-color-surface-sunken);
    color: var(--ds-color-ink-2);
    font-size: var(--ds-text-cap);
    font-weight: 700;
}

html body .hihouden-scope .prem-table td,
html body .hihouden-scope .ev-panel table td {
    background: var(--ds-color-surface);
    border-bottom: 1px solid var(--ds-color-hairline);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

/* 開始Gの列: 少し沈めた面。左の色線（機械割105%以上=青・100%未満=赤）はそのまま */
html body .hihouden-scope .prem-table td:nth-child(1),
html body .hihouden-scope .ev-panel table td:nth-child(1) {
    background: var(--ds-color-surface-sunken);
    color: var(--ds-color-ink);
}

html body .hihouden-scope .ev-panel table tbody tr:hover td {
    background: var(--ds-color-surface-sunken);
}

html body .hihouden-scope .ev-negative,
html body .hihouden-scope .payout-under-100 {
    color: var(--ds-color-minus);
}

html body .hihouden-scope .payout-over-105 {
    color: var(--ds-color-plus);
}

/* ---------- 説明（小役狙い・やめどき等） ---------- */
html body .hihouden-scope .info-header {
    color: var(--ds-color-ink);
    font-size: 14px;
    font-weight: 700;
}

html body .hihouden-scope .info-header i {
    color: var(--ds-color-ink-3);
}

html body .hihouden-scope .info-body {
    color: var(--ds-color-ink-2);
    font-size: var(--ds-text-sub);
    line-height: 1.7;
}

html body .hihouden-scope .machine-image img {
    border-radius: var(--ds-radius-lg);
}

/* ---------- ページの背景（中身と外側の色をそろえ、下に白い帯が出ないように） ---------- */
/* html にはテーマ切替の処理が背景色を直接書き込むので !important で上書きする */
html:has(.hihouden-scope),
html body:has(.hihouden-scope) {
    background: var(--ds-color-bg) !important;
}