/* ========================================
   CSS Variables
   ======================================== */
:root {
    --bg-main: #14141f;
    --bg-card: #ffffff;
    --bg-header: #ffffff;
    --bg-hover: #334155;

    --text-main: #cfcfcf;
    --text-muted: #94a3b8;
    --text-accent: #cfcfcf;

    --border-color: #334155;

    --color-gold: #facc15;
    --color-silver: #e2e8f0;
    --color-bronze: #d97706;

    /* 全ページ共通: 中央配置コンテナ + 左右余白 */
    --site-max-width: 1400px;
    --site-gutter: 20px;
}

/* ========================================
   Base
   ======================================== */
body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    line-height: 1.5;
    padding-top: 60px; /* fixed navbar の高さ分オフセット */
}

/* 中央配置のコンテンツ列（中身は text-align: left） */
.site-container {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
    text-align: left;
}

.site-header h1 {
    margin: 0.75rem 0;
    font-size: 1.75rem;
    font-weight: bold;
}

.site-header h1 a {
    color: inherit;
    text-decoration: none;
}

/* ページ内ラッパー（レイアウト余白は main.site-container が担当） */
.default {
    /* 後方互換のマーカークラス。horizontal padding は付けない */
}

a:link,
a:visited {
    color: #cfcfcf;
}

/* ========================================
   Images
   ======================================== */
.image-mid {
    height: 50px;
/*    max-width: 100%;*/
    object-fit: contain;
    vertical-align: bottom;
}

.image-small {
    height: 20px;
    object-fit: contain;
    vertical-align: bottom;
}

/* ========================================
   Radio Buttons
   ======================================== */
input[type=radio] {
    display: none;
}

input[type="radio"]:checked + label {
    background: #373757;
    color: #cfcfcf;
}

.radio-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin: 2px;
    min-width: 100px;
    padding: 4px 10px;
    text-align: center;
    line-height: 1.3;
    cursor: pointer;
    border: 1px solid #3a3a3a;
    border-radius: 5px;
    color: #cfcfcf;
    white-space: nowrap;
}

.radio-label:hover {
    background-color: #222235;
}

/* ========================================
   Pulldown (Custom Select)
   ======================================== */
.pulldown {
    position: relative;
    display: inline-block;
}

.pulldown::before,
.pulldown::after {
    position: absolute;
    content: '';
    pointer-events: none;
}

.pulldown::before {
    display: inline-block;
    right: 0;
    width: 1.6em;
    height: 1.6em;
    border-radius: 0 3px 3px 0;
    background-color: #1e1e2e;
}

.pulldown::after {
    position: absolute;
    top: 45%;
    right: .75em;
    transform: translate(50%, -50%) rotate(45deg);
    width: 5px;
    height: 5px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
}

.pulldown select {
    appearance: none;
    min-width: 180px;
    height: 1.8em;
    padding: .1em 2.2em .1em .6em;
    border: none;
    border-radius: 3px;
    background-color: #222235;
    color: #cfcfcf;
    font-size: 0.9em;
    cursor: pointer;
}

.pulldown select:focus {
    outline: 2px solid #373757;
}

/* ========================================
   Cross-Highlight Table (共通ベース)
   ======================================== */
.cross-highlight {
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: collapse;
    border: solid 1px #666;
    overflow: hidden;
}

.cross-highlight tr {
    height: 50px;
}

.cross-highlight tr:hover {
    background-color: #222235;
}

.cross-highlight td,
.cross-highlight th {
    padding: 5px;
    margin: auto;
    position: relative;
    text-align: center;
    white-space: nowrap;   /* テキスト折り返しによる列幅の拡大を防ぐ */
    width: 130px;          /* 全ページで統一する列幅 */
    max-width: 130px;
    border: 2px solid #666;
}

.cross-highlight td:hover {
    background-color: #373757;
}

.cross-highlight td:hover::after {
    content: "";
    background-color: #222235;
    width: 100%;
    height: 200vh;
    position: absolute;
    top: -100vh;
    left: 0;
    z-index: -1;
}

/* ========================================
   Record History Table (x-record-table コンポーネント用)
   リスト型テーブルなので列幅はコンテンツに合わせる
   （マトリックステーブルの固定幅を解除）
   ======================================== */
.record-history-table td,
.record-history-table th {
    text-align: center;
    white-space: nowrap;
    width: auto;
    max-width: none;
    padding: 8px 12px; /* 文字と枠線の間の余白 */
}

/* Mode / Machine / Rider 列は左寄せ */
.record-history-table td:nth-child(3),
.record-history-table td:nth-child(5),
.record-history-table td:nth-child(6) {
    text-align: left;
}

/* Player 列 (7列目) は中央揃え */
.record-history-table td:nth-child(7) {
    text-align: center;
}

/* 記録修正 (/modifyrecords): Mode を Main / Sub で分割した列構成 */
.modify-records-table td:nth-child(3),
.modify-records-table td:nth-child(4),
.modify-records-table td:nth-child(5),
.modify-records-table td:nth-child(6),
.modify-records-table td:nth-child(7) {
    text-align: left;
}

/* 承認・WR/PB フラグ（8–12）、プレイヤー（13） */
.modify-records-table td.modify-records-meta,
.modify-records-table td:nth-child(13) {
    text-align: center;
    white-space: nowrap;
}

.modify-records-table td:nth-child(14) {
    text-align: center;
}

/* タイム列: 入力の上下クリップを防ぐ */
.modify-records-table td:nth-child(2) {
    vertical-align: middle;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* display:none だと一部ブラウザで form 属性の送信対象として認識されないことがあるため、画面外に退避 */
.modify-records-external-form {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.modify-records-time-inputs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2em;
    flex-wrap: nowrap;
    vertical-align: middle;
}

.modify-records-time-part {
    /* モバイルで number 入力が縦につぶれないよう min-height / line-height を確保 */
    min-width: 2.85rem;
    width: 3.1rem;
    max-width: none;
    min-height: 2.1rem;
    padding: 6px 8px;
    box-sizing: border-box;
    text-align: center;
    font-size: inherit;
    line-height: 1.35;
    border-radius: 3px;
}

.modify-records-time-sep {
    opacity: 0.85;
    user-select: none;
    flex: 0 0 auto;
    line-height: 1.35;
    padding-bottom: 1px;
}

.modify-records-select {
    min-width: 6rem;
    max-width: 14rem;
    font-size: inherit;
    line-height: 1.35;
    min-height: 2.1rem;
    padding: 6px 8px;
    box-sizing: border-box;
    vertical-align: middle;
}

.modify-records-select--bool {
    min-width: 3.5rem;
    max-width: 5.5rem;
}

.modify-records-save {
    padding: 4px 10px;
    font-size: inherit;
    line-height: 1.2;
    cursor: pointer;
}

.modify-records-readonly {
    display: inline-block;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modify-records-flash {
    margin: 0 0 0.75rem 0;
    color: #8fbc8f;
}

.modify-records-errors {
    margin: 0 0 0.75rem 1.25rem;
    color: #e08080;
}

/* 投稿履歴・承認状況・記録修正など、一覧のページネーション共通 */
.paged-list-page-info,
.modify-records-page-info {
    margin: 0 0 0.5rem 0;
    font-size: 0.95em;
    color: #c8c8d0;
}

.paged-list-pagination,
.modify-records-pagination {
    margin: 0.5rem 0 1rem 0;
}

.paged-list-pagination nav ul.pagination,
.modify-records-pagination nav ul.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.paged-list-pagination nav ul.pagination li,
.modify-records-pagination nav ul.pagination li {
    display: inline-block;
}

.paged-list-pagination nav ul.pagination a,
.paged-list-pagination nav ul.pagination span,
.modify-records-pagination nav ul.pagination a,
.modify-records-pagination nav ul.pagination span {
    display: inline-block;
    min-width: 2rem;
    padding: 4px 10px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #444;
    border-radius: 4px;
    color: #c8d8f0;
    background: #1a1a24;
    box-sizing: border-box;
}

.paged-list-pagination nav ul.pagination li.active span,
.modify-records-pagination nav ul.pagination li.active span {
    background: #2a3a55;
    border-color: #558abe;
    color: #fff;
    font-weight: 600;
}

.paged-list-pagination nav ul.pagination li.disabled span,
.modify-records-pagination nav ul.pagination li.disabled span {
    opacity: 0.45;
    cursor: default;
}

.paged-list-pagination nav ul.pagination a:hover,
.modify-records-pagination nav ul.pagination a:hover {
    background: #252535;
    border-color: #558abe;
}

.paged-list-pagination--bottom,
.modify-records-pagination--bottom {
    margin-top: 1rem;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .paged-list-pagination nav ul.pagination,
    .modify-records-pagination nav ul.pagination {
        flex-wrap: nowrap;
        gap: 3px;
    }

    .paged-list-pagination nav ul.pagination a,
    .paged-list-pagination nav ul.pagination span,
    .modify-records-pagination nav ul.pagination a,
    .modify-records-pagination nav ul.pagination span {
        min-width: 1.6rem;
        padding: 4px 5px;
        font-size: 0.85rem;
    }
}


/* ========================================
   Links
   ======================================== */
.form-link:link {
    color: #558abe;
}

.player-link:link {
    text-decoration: none;
}

/* ========================================
   Old Records (バージョン区切り)
   ======================================== */

/* node ページ: <tr class="oldrecords"> */
.oldrecords td {
    color: #4e4e4e;
}

.oldrecords a:link,
.oldrecords a:visited {
    color: #4e4e4e;
}

/* matrix ページ: <div class="records"> で旧バージョン記録をラップ */
.records {
    color: #4e4e4e;
}

.records a:link,
.records a:visited {
    color: #4e4e4e;
}

/* ========================================
   Table Scroll Wrapper (レスポンシブ)
   ======================================== */
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* WR/ランキング等のマトリクス表: main.site-container をはみ出し画面幅いっぱいに */
.matrix-table-full-bleed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
}

/* ========================================
   View Toggle (matrix / history 切替)
   ======================================== */
.view-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 14px;
}

/* ========================================
   Mode Filter (ラジオボタンフィルター)
   ======================================== */
.mode-filter {
    display: flex;
    flex-direction: column;
    gap: 14px;  /* ボタン行の上下間隔 */
}

.mode-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: flex-start;
}

/* ========================================
   Filter Row / Buttons
   ======================================== */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.reset-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    padding: .1em .8em;
    border: none;
    border-radius: 5px;
    background-color: #1e1e2e;
    color: #fff;
    font-size: 0.9em;
    cursor: pointer;
    white-space: nowrap;
}

.reset-button:hover {
    background-color: #222235;
}

/* ========================================
   Menu Cards (Home / Status ページ)
   ======================================== */
.menu-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.menu-card {
    background-color: #222235;
    border: 1px solid #222235;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.menu-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #cfcfcf;
    color: #cfcfcf;
}

.menu-title-link:link,
.menu-title-link:visited {
    color: inherit;
    text-decoration: none;
}

.menu-title-link:hover,
.menu-title-link:focus-visible {
    color: #558abe;
}

.menu-title-link:focus-visible {
    outline: 2px solid #558abe;
    outline-offset: 2px;
}

.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-list li {
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: #cfcfcf;
}

.menu-list a {
    color: #558abe;
    text-decoration: none;
    font-weight: 500;
}

.menu-list a:hover {
    text-decoration: underline;
    color: #004080;
}

/* ========================================
   History Section
   ======================================== */
.history-section h2 {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #cfcfcf;
}

table.history-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 0.9rem;
}

table.history-table th,
table.history-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: center;
}

table.history-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

table.history-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* ========================================
   Responsive (Mobile: 768px 以下)
   ======================================== */
@media (max-width: 768px) {
    /* 文字サイズはデスクトップと同じ基準（ルートを縮めない） */
    body {
        line-height: 1.4;
    }

    :root {
        --site-gutter: 15px;
    }

    .menu-card {
        padding: 12px;
    }

    .menu-title {
        font-size: 1.05rem;
        margin-bottom: 10px;
        padding-bottom: 6px;
    }

    .view-toggle {
        margin-bottom: 10px;
        gap: 3px;
    }

    .mode-filter {
        gap: 8px;
    }

    .mode-filter-row {
        gap: 3px;
    }

    .filter-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .cross-highlight tr {
        height: auto;
        min-height: 0;
    }

    /* マトリクス表（records / ranking 等）。承認状況・WR保持数は列幅固定を当てない */
    table.cross-highlight:not(.record-history-table):not(.status-approval-table):not(.wr-holder-table) td,
    table.cross-highlight:not(.record-history-table):not(.status-approval-table):not(.wr-holder-table) th {
        min-width: 64px;
        width: 105px;
        max-width: 105px;
        padding: 2px 3px;
        line-height: 1.2;
        border-width: 1px;
    }

    .record-history-table.cross-highlight td,
    .record-history-table.cross-highlight th {
        width: auto;
        max-width: none;
        min-width: 0;
        padding: 5px 7px;
        line-height: 1.25;
        border-width: 1px;
    }

    .image-mid {
        height: 40px;
    }

    .image-small {
        height: 18px;
        vertical-align: middle;
    }

    .radio-label {
        min-width: 90px;
        font-size: 12px;
        padding: 3px 6px;
    }

    .menu-container {
        grid-template-columns: 1fr;
    }
}