:root {
    --bg: #f4f6f9;
    --panel: #ffffff;
    --ink: #1d2430;
    --ink-soft: #5b6675;
    --line: #dde3ea;
    --accent: #2f5fd8;
}

html, body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Segoe UI", "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
}

/* ---------------- ヘッダ ---------------- */
.app-header {
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 3px rgba(20, 30, 50, .06);
}

.app-brand {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.nav-chip {
    display: inline-block;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--ink-soft);
    font-size: .85rem;
    text-decoration: none;
}

.nav-chip:hover { background: #e2e8f0; color: var(--ink); }
.nav-chip-admin { background: #fdeceb; color: #b02a37; }

.user-badge { font-size: .85rem; color: var(--ink-soft); white-space: nowrap; }
.role-tag {
    display: inline-block;
    margin-left: .25rem;
    padding: 0 .4rem;
    border-radius: 4px;
    background: #e8edf5;
    font-size: .75rem;
}

/* ---------------- パネル ---------------- */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1rem .9rem;
    margin-bottom: 1rem;
}

/*
 * 横並びで高さを揃えたパネル（.h-100）は、下マージンを持つと列の外へはみ出して
 * 行の下に余白が生まれない。余白は行側（.row の mb-*）で取る。
 */
.panel.h-100 {
    margin-bottom: 0;
}

/* 画面幅いっぱいに使いたいので、本文コンテナの左右余白は詰める */
main.container-fluid {
    padding-left: .5rem;
    padding-right: .5rem;
}

.panel-title {
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .75rem;
    color: var(--ink);
}

/* ---------------- 総合順位バー ---------------- */
/* 順位 / チーム名 / 得点 / バー の順に並べる（得点はチーム名のすぐ右） */
.total-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(7rem, 10rem) 4.5rem 1fr;
    align-items: center;
    gap: .5rem;
    padding: .35rem 0;
}

.total-rank {
    font-weight: 800;
    font-size: 1.35rem;
    /* 左端に余白を作らないよう左寄せ（順位は1桁なので桁ズレは起きない） */
    text-align: left;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.total-rank.is-top { color: #d4a017; }

.team-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: .3rem .5rem;
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.total-bar-track {
    background: #eaeef4;
    border-radius: 999px;
    height: 1.5rem;
    overflow: hidden;
}

.total-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .6s cubic-bezier(.2, .7, .3, 1);
}

.total-points {
    font-weight: 800;
    font-size: 1.25rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------------- 種目テーブル ---------------- */
.event-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.event-table th,
.event-table td {
    border-bottom: 1px solid var(--line);
    padding: .4rem .5rem;
    text-align: center;
    white-space: nowrap;
}

.event-table th { background: #f7f9fc; font-weight: 600; color: var(--ink-soft); }
.event-table td.team-cell { text-align: left; }
.event-table td.num { font-variant-numeric: tabular-nums; text-align: right; }
.event-table tr.pending td { color: #9aa5b1; }

.badge-pending { background: #eef1f5; color: #8a94a0; }
.badge-done { background: #e6f4ec; color: #1c7a45; }

/* ---------------- 大画面表示 ---------------- */
.display-body {
    background: #0d1220;
    color: #fff;
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
}

.display-wrap { padding: 2vh 2vw; }

.display-title {
    font-size: clamp(1.5rem, 3.2vw, 3rem);
    font-weight: 800;
    letter-spacing: .04em;
    margin-bottom: 1.5vh;
}

.display-sub { font-size: clamp(.8rem, 1.2vw, 1.1rem); color: #93a0b8; }

/* 順位 / チーム名 / 得点 / バー の順（得点はチーム名のすぐ右） */
.display-row {
    display: grid;
    grid-template-columns: 3.4vw 18vw 9vw 1fr;
    align-items: center;
    gap: .8vw;
    margin-bottom: 1.2vh;
}

.display-rank {
    font-size: clamp(1.6rem, 4vw, 4rem);
    font-weight: 900;
    text-align: left;
    color: #6b7a94;
    font-variant-numeric: tabular-nums;
}

.display-rank.is-top { color: #ffd75e; }

.display-team {
    font-size: clamp(1rem, 2vw, 2rem);
    font-weight: 800;
    padding: .5vh 1vw;
    border-radius: .6vw;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.display-track {
    background: #1b2436;
    border-radius: 999px;
    height: clamp(1.6rem, 4vh, 3.5rem);
    overflow: hidden;
}

.display-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .8s cubic-bezier(.2, .7, .3, 1);
}

.display-points {
    font-size: clamp(1.4rem, 3.4vw, 3.4rem);
    font-weight: 900;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 表示OFF時のホールド画面 */
.hold-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 4vh 6vw;
}

.hold-message {
    font-size: clamp(1.8rem, 6vw, 6rem);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: .05em;
    background: linear-gradient(120deg, #ffd75e, #ff9f43, #ff6b6b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hold-sub {
    margin-top: 3vh;
    font-size: clamp(.9rem, 1.6vw, 1.5rem);
    color: #93a0b8;
    letter-spacing: .12em;
}

/* 接続状態インジケータ */
.conn-dot {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: #9aa5b1;
    margin-right: .35rem;
    vertical-align: middle;
}

.conn-dot.live { background: #22c55e; box-shadow: 0 0 0 .18rem rgba(34, 197, 94, .22); }
.conn-dot.down { background: #ef4444; }

/* ---------------- 入力フォーム ---------------- */
/*
 * Bootstrap の .form-control / .form-select は display:block なので、
 * td の text-align:center では中央に寄らず左端に張り付いてしまう。
 * 幅を固定している入力欄は自動マージンで見出しの真下に揃える。
 */
.event-table td > .form-control,
.event-table td > .form-select {
    margin-left: auto;
    margin-right: auto;
}

.score-input {
    width: 8rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rank-input { width: 5rem; text-align: center; }

/* 回戦・レースごとの入力欄（最大10列並ぶので狭く詰める） */
.component-input {
    width: 3.6rem;
    padding-left: .3rem;
    padding-right: .3rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 内訳の列はセル余白も詰めて、横スクロールをできるだけ減らす */
.event-table th.component-col,
.event-table td.component-col {
    padding-left: .2rem;
    padding-right: .2rem;
}

/* 人数の入力欄（けん玉チャレンジなど） */
.count-input {
    width: 4.2rem;
    padding-left: .3rem;
    padding-right: .3rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 着順を選ぶプルダウン（チーム別に順位を入れる形式） */
.rank-select {
    width: 3.8rem;
    padding-left: .3rem;
    padding-right: 1.2rem;
    text-align: center;
}

/* チームを選ぶプルダウン（順位別にチームを入れる形式） */
.team-select {
    width: 6.8rem;
    padding-left: .3rem;
    padding-right: 1.2rem;
}

/* 同じレースで同じチームが重複して選ばれている欄 */
.is-duplicate {
    border-color: #d92b2b !important;
    background: #fdecec;
    box-shadow: 0 0 0 .15rem rgba(217, 43, 43, .2);
}

.input-row-manual { background: #fff8e6; }

/* ---------------- 印刷 ---------------- */
@media print {
    .app-header,
    .no-print,
    .btn,
    form.d-inline { display: none !important; }

    body { background: #fff; }

    .panel {
        border: none;
        break-inside: avoid;
        padding: 0;
        margin-bottom: 1.2rem;
    }

    .event-table { font-size: 10pt; }
    .total-bar-track { border: 1px solid #ccc; }

    a[href]::after { content: none !important; }
}