/*
 * 【保守コメント：CSS】
 * CSSは「後ろに書いたものが勝つ」ため、画面ごとの微調整はできるだけ下部に追記します。
 * 共通部品を変えると全画面へ影響するため、.button や .summary-card の変更時は複数画面を確認してください。
 */

/*
 * KOKERto Mahjong App 共通CSS
 *
 * 画面全体の見た目はこのファイルに集約しています。
 * 大きく分けると、以下の順番で定義しています。
 * 1. 色・余白・角丸などの共通変数
 * 2. ヘッダー/コンテナ/ボタンなどの共通部品
 * 3. カレンダー画面
 * 4. 日帳入力画面
 * 5. プレイヤー画面
 * 6. スマホ表示用のメディアクエリ
 */

/* 共通カラー・影・角丸など。色味を変えたい場合はまずここを変更します。 */
:root {
    --bg: #eef2f7;
    --bg-accent: #e4ebf5;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --surface-tint: #f3f7fd;
    --text: #172033;
    --muted: #667085;
    --line: #d5ddeb;
    --line-strong: #c1cddd;
    --primary: #223b67;
    --primary-dark: #162746;
    --primary-soft: #e9eff9;
    --danger: #b42318;
    --success: #067647;
    --warning: #b54708;
    --shadow: 0 18px 40px rgba(15, 23, 42, .08);
    --shadow-soft: 0 10px 24px rgba(15, 23, 42, .05);
    --radius-lg: 24px;
    --radius: 18px;
    --radius-sm: 12px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* bodyは全画面共通の背景と文字設定です。背景グラデーションを変えると全体の印象が変わります。 */
body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top right, rgba(34, 59, 103, .06), transparent 24%),
        linear-gradient(180deg, #f6f8fc 0%, var(--bg) 100%);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
    line-height: 1.6;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* 画面上部の固定ヘッダーです。 */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 18px 28px;
    background: rgba(17, 24, 39, .92);
    color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 28px rgba(17, 24, 39, .18);
}

.site-header a {
    color: #ffffff;
}

.brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand a {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .02em;
}

.brand span {
    font-size: 12px;
    color: #cdd7ea;
}

.site-header nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.site-header nav a {
    padding: 9px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    transition: .18s ease;
}

.site-header nav a:hover {
    background: rgba(255, 255, 255, .12);
    transform: translateY(-1px);
}

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 34px 20px 84px;
}

.container.wide {
    max-width: 1440px;
}

.page-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 24px;
    padding: 8px 4px 0;
}

h1 {
    margin: 0;
    font-size: clamp(28px, 3vw, 46px);
    line-height: 1.15;
    letter-spacing: -.02em;
}

h2,
.section-title {
    margin: 0;
    font-size: 20px;
    line-height: 1.35;
}

.page-title-row .muted {
    max-width: 720px;
}

.muted {
    color: var(--muted);
    margin: 8px 0 0;
}

.actions,
.form-actions,
.sticky-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* 全画面で使うボタンの基本デザインです。 */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--primary);
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(34, 59, 103, .18);
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.button:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(34, 59, 103, .22);
}

.button.secondary {
    background: rgba(255, 255, 255, .84);
    color: var(--primary);
    border-color: var(--line-strong);
    box-shadow: none;
}

.button.secondary:hover {
    background: var(--primary-soft);
}

.button.ghost {
    border-color: transparent;
    background: transparent;
    color: var(--primary);
    box-shadow: none;
}

.button.large {
    min-height: 52px;
    padding: 12px 26px;
    font-size: 16px;
}

.panel,
.summary-card,
.hint-box,
.card-form,
.stats-grid,
.table-scroll,
.page-hero {
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(209, 219, 233, .92);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
}

.page-hero {
    padding: 26px 28px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(34, 59, 103, .06), rgba(255, 255, 255, .96));
}

.summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    margin-bottom: 20px;
}

.summary-card .label,
.stat-label,
.label {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

.summary-card strong {
    font-size: 28px;
    line-height: 1.2;
}

.inline-form,
.search-form {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
}

.search-form {
    width: 100%;
}

.field,
.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

label,
.field-label {
    display: block;
    font-size: 13px;
    color: #344054;
    font-weight: 700;
}

.field-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 22px;
}

.required-badge,
.required {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: #fff0ee;
    color: var(--danger);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid #cfd8e5;
    border-radius: 14px;
    background: #ffffff;
    color: var(--text);
    padding: 12px 14px;
    font-size: 15px;
    transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

input::placeholder,
textarea::placeholder {
    color: #98a2b3;
}

input:hover,
select:hover,
textarea:hover {
    border-color: #b8c6da;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(84, 122, 191, .14);
    border-color: var(--primary);
}

textarea {
    resize: vertical;
    min-height: 140px;
}

.inline-form input,
.inline-form select {
    min-width: 130px;
}

.search-form input[type="search"] {
    flex: 1 1 340px;
    min-width: 260px;
}

.flash {
    padding: 14px 16px;
    border-radius: 14px;
    margin-bottom: 16px;
    font-weight: 800;
}

.flash.success {
    background: #ecfdf3;
    color: var(--success);
    border: 1px solid #abefc6;
}

.flash.error {
    background: #fef3f2;
    color: var(--danger);
    border: 1px solid #fecdca;
}

/* カレンダー本体。7列グリッドで日〜土を表現します。 */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.weekday {
    background: #eef3fb;
    padding: 14px 12px;
    text-align: center;
    font-weight: 900;
    color: #31415f;
}

.weekday.sunday {
    color: #b42318;
}

.weekday.saturday {
    color: #175cd3;
}

.calendar-day {
    min-height: 132px;
    padding: 14px;
    background: #ffffff;
    color: var(--text);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    text-decoration: none;
    transition: background .14s ease, transform .14s ease;
}

.calendar-day:hover {
    background: var(--primary-soft);
    transform: translateY(-1px);
}

.calendar-day.other-month {
    background: #f7f8fb;
    color: #98a2b3;
}

.day-number {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border-radius: 999px;
}

.day-number.today {
    background: var(--primary);
    color: #ffffff;
}

.game-badge,
.empty-badge {
    display: inline-flex;
    align-self: flex-start;
    justify-content: center;
    align-items: center;
    min-width: 62px;
    min-height: 46px;
    border-radius: 16px;
    border: 1px solid #d5deea;
    background: #ffffff;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
}

.empty-badge {
    color: #c0c6d1;
    font-size: 16px;
}

.hint-box {
    padding: 18px 20px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #fffdf5, #ffffff);
    border-color: #f4d789;
}

.hint-box p {
    margin: 8px 0 0;
}

.table-scroll {
    overflow-x: auto;
    background: var(--surface);
    margin-bottom: 18px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td,
.ledger-table th,
.ledger-table td {
    border-bottom: 1px solid var(--line);
    padding: 14px 12px;
    text-align: left;
    vertical-align: middle;
}

.data-table th,
.ledger-table th {
    background: #f2f6fc;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
    color: #344054;
}

.data-table tbody tr {
    transition: background .12s ease;
}

.data-table tbody tr:hover {
    background: #f9fbff;
}

.data-table td a {
    font-weight: 700;
}

/* 日帳入力テーブル。横幅が広いため、スマホでは横スクロール前提です。 */
.ledger-table {
    min-width: 900px;
}

.ledger-table th {
    text-align: center;
}

.ledger-table td {
    padding: 8px;
}

.ledger-table select {
    min-width: 54px;
}

.player-id-input {
    min-width: 90px;
}

.game-no {
    width: 50px;
    text-align: center !important;
    font-weight: 900;
    background: #f8fbff;
}

.sticky-actions {
    position: sticky;
    bottom: 12px;
    gap: 14px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(209, 219, 233, .95);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
    padding: 18px 20px;
    margin-top: 18px;
    backdrop-filter: blur(10px);
}

/* プレイヤー成績カードのグリッドです。 */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
    padding: 14px;
    overflow: visible;
}

.stat-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #dde6f3;
    border-radius: 18px;
    padding: 18px;
    min-height: 112px;
    box-shadow: 0 10px 18px rgba(15, 23, 42, .04);
}

.stat-card strong {
    display: block;
    font-size: clamp(24px, 2vw, 32px);
    line-height: 1.25;
    margin-top: 6px;
    white-space: nowrap;
}

.card-form {
    padding: 28px;
}

.card-form .section-title {
    margin-bottom: 4px;
}

.form-section+.form-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #e4eaf3;
}

.section-description {
    margin: 6px 0 18px;
    color: var(--muted);
    font-size: 14px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid .full {
    grid-column: 1 / -1;
}

.field-error {
    color: var(--danger);
    font-size: 12px;
    margin-top: -2px;
}

.form-actions {
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 10px;
    border-top: 1px solid #e4eaf3;
}

.empty-row {
    text-align: center !important;
    color: var(--muted);
    padding: 34px !important;
}

.info-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(34, 59, 103, .08);
    color: var(--primary);
    font-weight: 700;
}

.stat-caption {
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 920px) {

    .page-title-row,
    .summary-card,
    .summary-card.stacked-mobile,
    .site-header {
        flex-direction: column;
        align-items: stretch;
    }

    .actions {
        width: 100%;
    }

    .actions .button,
    .summary-card .button,
    .form-actions .button,
    .sticky-actions .button {
        width: 100%;
    }

    .form-grid,
    .form-grid.three {
        grid-template-columns: 1fr;
    }

    .card-form {
        padding: 22px 18px;
    }
}

@media (max-width: 760px) {

    .container,
    .container.wide {
        padding: 24px 14px 72px;
    }

    .calendar-grid {
        grid-template-columns: repeat(7, minmax(72px, 1fr));
    }

    .calendar-day {
        min-height: 92px;
        padding: 10px 8px;
    }

    .game-badge,
    .empty-badge {
        min-width: 42px;
        min-height: 34px;
        font-size: 18px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px;
    }

    .stat-card {
        min-height: 98px;
        padding: 14px;
    }

    .sticky-actions {
        position: static;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, .9fr);
    gap: 22px;
    align-items: stretch;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
}

.hero-copy .muted {
    font-size: 15px;
    max-width: 760px;
}

.hero-actions {
    margin-top: 6px;
}

.hero-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.hero-kpis-three {
    grid-template-columns: 1fr 1fr;
}

.hero-kpis-three .metric-card.premium {
    grid-column: 1 / -1;
}

.metric-card {
    background: rgba(255, 255, 255, .92);
    border: 1px solid #d9e2ef;
    border-radius: 22px;
    padding: 18px 20px;
    box-shadow: 0 12px 20px rgba(15, 23, 42, .05);
}

.metric-card.premium {
    background: linear-gradient(135deg, rgba(34, 59, 103, .08), rgba(255, 255, 255, .96));
}

.metric-card.compact strong,
.metric-card.premium strong {
    display: block;
    margin-top: 4px;
    font-size: 28px;
    line-height: 1.2;
}

.calendar-toolbar-card {
    align-items: end;
}

.calendar-shell {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.premium-calendar {
    border: none;
    background: #dde5f0;
}

.calendar-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.calendar-day-link {
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
    background: rgba(34, 59, 103, .08);
    border-radius: 999px;
    padding: 6px 10px;
}

/* bodyは全画面共通の背景と文字設定です。背景グラデーションを変えると全体の印象が変わります。 
.calendar-day- body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}*/

.day-count-label {
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
}

.premium-day {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.premium-day:hover .calendar-day-link {
    color: var(--primary);
    background: rgba(34, 59, 103, .14);
}

.metric-inline {
    display: flex;
    align-items: center;
}



.ledger-scroll {
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
}

/* 日帳入力表のヘッダー固定です。縦スクロール時も席/着順の見出しが見えるようにしています。 */
.premium-ledger thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    box-shadow: inset 0 -1px 0 var(--line);
}

.premium-ledger thead tr:first-child th {
    background: #edf3fb;
}

.premium-ledger thead tr:nth-child(2) th {
    background: #f7faff;
}

.premium-ledger tbody tr:nth-child(odd) td {
    background: rgba(248, 251, 255, .66);
}

.premium-ledger tbody tr:hover td {
    background: #eef5ff;
}

.premium-ledger input,
.premium-ledger select {
    min-height: 44px;
    padding: 10px 12px;
    font-weight: 600;
}

/* 日帳入力表の左端固定列です。横スクロール時も何局目かを見失わないための設定です。 */
.premium-ledger .sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
}

.premium-ledger thead .sticky-col {
    z-index: 4;
}

.premium-ledger tbody .sticky-col {
    background: #f6f9fe;
}

.ledger-actions {
    justify-content: space-between;
}

@media (max-width: 1100px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-kpis,
    .hero-kpis-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .page-hero {
        padding: 20px 16px;
    }

    .hero-kpis,
    .hero-kpis-three {
        grid-template-columns: 1fr;
    }

    .metric-card.compact strong,
    .metric-card.premium strong {
        font-size: 24px;
    }

    .calendar-day-link,
    .day-count-label {
        font-size: 11px;
    }

    .premium-ledger input,
    .premium-ledger select {
        min-height: 40px;
        font-size: 14px;
    }

    .premium-ledger .player-id-input {
        min-width: 90px;
    }

    .summary-card.calendar-toolbar-card {
        align-items: stretch;
    }

    .metric-inline {
        width: 100%;
    }

    .metric-inline .info-chip {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .ledger-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ledger-actions>div,
    .ledger-actions>div .button {
        width: 100%;
    }
}

/* --- Ledger usability updates: 空欄時の前局引継ぎ補助 --- */
.game-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #eaf1fb;
    color: var(--primary);
}

.player-cell {
    min-width: 90px;
}

/* プレイヤーID入力欄の下に表示するHN/氏名プレビューです。JavaScriptで文言を差し込みます。 */
.player-preview {
    margin-top: 6px;
    min-height: 20px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f3f6fb;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.player-preview.found {
    background: #edf6ff;
    color: #184e86;
}

.player-preview.missing {
    background: #fff0ee;
    color: var(--danger);
}

@media (max-width: 760px) {
    .player-cell {
        min-width: 100px;
    }

    /* プレイヤーID入力欄の下に表示するHN/氏名プレビューです。JavaScriptで文言を差し込みます。 */
    .player-preview {
        font-size: 11px;
        white-space: normal;
    }
}

/* =========================================================
   Maintainability / UI final adjustments
   ---------------------------------------------------------
   ここから下は、今回のUI/UX見直しで追加した上書きCSSです。
   既存CSSを大きく壊さず、画面ごとの微調整を後ろで上書きしています。
   ========================================================= */

/* --- プレイヤー個別画面：成績カードの並び調整 ---
   上段：ID / 初回来店日 / 最終ゲーム日 / ゲーム数 / 平均着順
   下段：1着 / 2着 / 3着 / 4着
   PC/横向きタブレットでは20分割グリッドを使い、
   上段5枚を均等幅、下段4枚も均等幅にしています。
*/
.profile-stats {
    grid-template-columns: repeat(20, minmax(0, 1fr));
}

.profile-stats .profile-summary-card {
    grid-column: span 4;
}

.profile-stats .rank-card {
    grid-column: span 5;
    grid-row: 2;
}

/* --- カレンダー画面：日付マス内の余計な文言を廃止 ---
   HTML側から「入力する」のspanは削除済みですが、
   古いキャッシュや今後の再追加に備えて非表示指定も残しています。
*/
.calendar-day-link {
    display: none;
}

/* --- カレンダー画面：日付マスの押しやすさを改善 ---
   文字が少なくなった分、ゲーム数のバッジを主役にして、
   クリックできることはホバーとカード感で伝えます。
*/
.premium-day {
    border: 0;
}

.premium-day:hover {
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}

.calendar-day-header {
    min-height: 38px;
}

/* プレイヤーID入力欄の下に表示するHN/氏名プレビューです。JavaScriptで文言を差し込みます。 */
.player-preview {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- スマホ/タブレット調整 ---
   横幅が狭い時は成績カードを2列にし、カードが潰れないようにします。
*/
@media (max-width: 920px) {
    .profile-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-stats .profile-summary-card,
    .profile-stats .rank-card {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 520px) {
    .profile-stats {
        grid-template-columns: 1fr;
    }

    .calendar-day-header {
        min-height: 30px;
    }

    .day-count-label {
        display: none;
    }
}

/* =========================================================
   Ledger validation UX updates
   ---------------------------------------------------------
   日帳入力でエラーが出た時に、どの局・どの席・どの項目が悪いかを
   見た瞬間に判断できるようにするためのスタイルです。
   ========================================================= */

/* 着順列は小さめですが、スマホでもタップしやすい幅を確保します。 */
.rank-cell {
    min-width: 60px;
}

/* エラー行全体を薄い赤で示します。個別項目はさらに赤枠にします。 */
/* 行内のどこかにエラーがある場合、行全体を薄い赤背景にします。 */
.premium-ledger tbody tr.row-has-error td {
    background: #fff7f6;
}

/* 入力欄・セレクト単位のエラー表示です。 */
/* 入力エラーがあるinput/selectに付くclassです。HTML側のth:classappendで付与しています。 */
.field-has-error {
    border-color: #f04438 !important;
    background: #fffafa !important;
    box-shadow: 0 0 0 4px rgba(240, 68, 56, .12) !important;
}

/* セル下部のエラーメッセージです。 */
.cell-error,
.row-error {
    margin-top: 6px;
    color: var(--danger);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.row-error {
    max-width: 150px;
}

/* 使用人数外の席はプレビューを空表示にします。 */
.player-preview.unused {
    background: #f1f5f9;
    color: #64748b;
}

/* 日帳入力表は横スクロール前提で、入力欄が潰れない幅を確保します。 */
.premium-ledger {
    width: 100%;
    min-width: 100%;
}

@media (max-width: 760px) {

    .rank-cell {
        min-width: 76px;
    }

    .cell-error,
    .row-error {
        font-size: 11px;
    }
}

/* フリーとセットボタン。 */
.calendar-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.calendar-status-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 7px 10px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    transition: 0.2s ease;
}

.calendar-status-button:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}

/* カレンダー画面のfreeボタンのデザイン */
.free-button {
    background: #ecfdf3;
    color: #067647 !important;
}

/* カレンダー画面のsetボタンのデザイン */
.set-button {
    background: #fdf2f8;
    color: #be185d !important;
}

/* セット画面にてフリー中の時のみ遷移できると明示的にするデザイン */
.free-table-link {
    color: #2563eb;
    text-decoration: underline;
    font-weight: 700;
    cursor: pointer;
}

/* セット開始・フリー立卓横並びデザイン */
.action-cell {
    width: 1%;
    white-space: nowrap;
}

.action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-buttons .inline-form {
    margin: 0;
}

/* プレイヤー一覧左側にするデザイン */
.player-sort-buttons {
    display: flex;
    gap: 12px;
    margin-left: auto;
}

/* L/Mのデザイン */
.flag-cell {
    width: 32px;
    min-width: 32px;
}

.flag-cell input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.flag-stack {
    min-width: 30px;
    width: 30px;
    text-align: center;
}

.flag-stack label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    margin: 2px 0;
}

.flag-stack input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0 0 4px;
}

.container.wide.ledger-page {
    max-width: 1700px;
}

.ledger-table input[type="time"] {
    width: 90px;
    min-width: 90px;
    padding: 8px;
}

@media (max-width: 1200px) {

    .player-preview {
        display: none;
    }

    .ledger-scroll {
        overflow-x: auto;
    }

    .ledger-hero .muted {
        display: none;
    }
}


/* 店舗ロゴ表示用。
   ロゴ文字がヘッダーの濃色背景に同化しないよう、白い台座の上に表示します。 */
.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.brand-logo-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}

.brand-logo {
    display: block;
    width: auto;
    height: 30px;
    max-width: 148px;
    object-fit: contain;
}

.brand-title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* iPad操作用。見た目を大きく変えず、横スクロールとタップを安定させます。 */
.table-scroll,
.ledger-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

button,
.button,
input,
select,
textarea {
    touch-action: manipulation;
}

@media (max-width: 1024px) {
    .site-header {
        gap: 14px;
        padding: 14px 18px;
    }

    .brand-logo-card {
        padding: 5px 8px;
    }

    .brand-logo {
        height: 26px;
        max-width: 126px;
    }

    .brand-title {
        font-size: 13px;
    }

    .site-header nav a {
        padding: 8px 12px;
        font-size: 13px;
    }
}

.reservation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.reservation-grid .form-field-full {
    grid-column: 1 / -1;
}

@media (max-width: 1024px) {
    .reservation-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .reservation-grid {
        grid-template-columns: 1fr;
    }
}

/* セット予約画面専用 */
.reservation-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

/* カレンダーにセット予約有無 */
.reservation-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 20px;
    padding: 0 8px;
    border-radius: 6px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-right: 8px;
}

.reservation-action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.reservation-action-buttons .button {
    min-width: 70px;
}

.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.status-reserved {
    background: #fee2e2;
    color: #b91c1c;
}

.status-visited {
    background: #dcfce7;
    color: #166534;
}

.status-cancelled {
    background: #f3f4f6;
    color: #4b5563;
}

.reservation-action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* =========================================================
   iPad / iPhone 店舗運用 UI layer (2026-10)
   ---------------------------------------------------------
   既存機能・URL・フォーム名は変更せず、タッチ操作とレスポンシブ表示を改善。
   - iPad: 上部ナビ + 2カラム中心
   - iPhone: 固定ボトムナビ + カード型一覧
   - iOS Safari: 16px入力でフォーカス時の自動ズームを防止
   ========================================================= */
:root {
    --mobile-nav-height: 68px;
    --header-height: 76px;
    --tap-size: 48px;
}

body {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

button,
.button,
input,
select,
textarea,
a {
    -webkit-tap-highlight-color: transparent;
}

button,
.button,
input,
select {
    min-height: var(--tap-size);
}

input,
select,
textarea {
    font-size: 16px;
}

button:active,
.button:active,
.site-header a:active {
    transform: scale(.985);
}

button:focus-visible,
.button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .28);
    outline-offset: 2px;
}

.mobile-only,
.mobile-bottom-nav {
    display: none;
}

/* Header: iPad横向きでも1段に収め、ナビは必要時に横スクロール */
.site-header {
    min-height: var(--header-height);
    padding-top: max(14px, env(safe-area-inset-top));
}

.site-header .top-nav {
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.site-header .top-nav::-webkit-scrollbar {
    display: none;
}

.site-header .top-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 一覧はiPadで横スクロールしても慣性を効かせる */
.table-scroll,
.ledger-scroll,
.calendar-shell {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* フリー入力は項目を潰さず、iPad landscapeで安定した幅を維持 */
.premium-ledger {
    min-width: 1180px;
}

.premium-ledger input,
.premium-ledger select {
    font-size: 16px;
    min-height: 48px;
}

.premium-ledger .flag-stack input[type="checkbox"] {
    width: 24px;
    height: 24px;
    min-height: 24px;
}

.premium-ledger thead th {
    top: var(--header-height);
}

/* カレンダーの日別情報を2列に揃える */
.calendar-day-body {
    display: grid;
    grid-template-columns: minmax(54px, auto) 1fr;
    align-items: center;
    gap: 8px;
}

.calendar-day-body br {
    display: none;
}

.calendar-status-button {
    min-height: 40px;
    min-width: 58px;
}

.game-badge,
.empty-badge {
    width: 100%;
    min-width: 0;
    padding: 4px 8px;
}

/* 卓管理の状態を少し見やすく */
.table-management-table td:first-child strong,
.table-management-table .free-table-link strong {
    font-size: 17px;
}

.action-buttons .button,
.reservation-action-buttons .button {
    min-height: 46px;
}

.edit-form-card,
.reservation-form-card {
    display: block;
}

.edit-form-card > form,
.reservation-form-card > form {
    width: 100%;
}

/* iPad portrait / 11-inchまで */
@media (max-width: 1024px) {
    :root {
        --header-height: 70px;
    }

    .site-header {
        flex-direction: row !important;
        align-items: center !important;
        padding: max(10px, env(safe-area-inset-top)) 14px 10px;
        gap: 12px;
    }

    .site-header .brand {
        flex: 0 0 auto;
    }

    .site-header .top-nav {
        display: flex;
        width: auto;
    }

    .site-header .top-nav a {
        padding: 8px 11px;
        font-size: 13px;
    }

    .container,
    .container.wide {
        padding-left: 18px;
        padding-right: 18px;
    }

    .page-title-row {
        gap: 16px;
    }

    .button {
        min-height: 48px;
    }

    .player-sort-buttons {
        width: 100%;
        margin-left: 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
    }

    .player-sort-buttons .button {
        flex: 0 0 auto;
    }
}

/* iPhone / 小型端末 */
@media (max-width: 767px) {
    :root {
        --header-height: 60px;
    }

    body {
        padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    }

    .site-header {
        min-height: var(--header-height);
        padding: max(8px, env(safe-area-inset-top)) 12px 8px;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center;
    }

    .site-header .brand {
        width: 100%;
    }

    .brand-link {
        width: 100%;
        justify-content: center;
    }

    .brand-logo-card {
        padding: 4px 8px;
        border-radius: 11px;
    }

    .brand-logo {
        height: 24px;
        max-width: 116px;
    }

    .brand-title {
        font-size: 12px;
    }

    .site-header .top-nav {
        display: none !important;
    }

    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: start;
        padding: 6px 5px env(safe-area-inset-bottom);
        background: rgba(255,255,255,.96);
        border-top: 1px solid #dbe3ef;
        box-shadow: 0 -10px 28px rgba(15,23,42,.10);
        backdrop-filter: blur(16px);
    }

    .site-header .mobile-bottom-nav a {
        min-width: 0;
        min-height: 56px;
        padding: 5px 2px;
        border: 0;
        border-radius: 12px;
        color: #475467;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        font-size: 10px;
        line-height: 1.15;
        font-weight: 800;
    }

    .site-header .mobile-bottom-nav a:hover,
    .site-header .mobile-bottom-nav a:active {
        background: #eef3fb;
        color: var(--primary);
        transform: none;
    }

    .mobile-bottom-nav svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mobile-only {
        display: block;
    }

    .mobile-scroll-hint {
        margin: 0 0 8px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
        text-align: center;
    }

    .container,
    .container.wide,
    .container.wide.ledger-page {
        padding: 18px 12px 28px;
    }

    h1 {
        font-size: clamp(25px, 8vw, 32px);
    }

    .page-title-row {
        margin-bottom: 16px;
        padding-top: 0;
    }

    .page-title-row .muted,
    .hero-copy .muted {
        font-size: 13px;
        line-height: 1.55;
    }

    .page-hero {
        margin-bottom: 14px;
        padding: 18px 14px;
        border-radius: 18px;
    }

    .hero-copy {
        gap: 10px;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .hero-actions .button {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .metric-card {
        border-radius: 16px;
        padding: 14px 15px;
    }

    .summary-card {
        border-radius: 18px;
        padding: 16px;
    }

    .summary-card strong {
        font-size: 22px;
    }

    .inline-form,
    .search-form {
        width: 100%;
        align-items: stretch;
    }

    .inline-form .form-field,
    .search-form .form-field {
        flex: 1 1 140px;
    }

    .search-form input[type="search"] {
        min-width: 0;
        flex-basis: 100%;
    }

    /* 月間カレンダーは無理に7列を圧縮せず、読みやすいサイズで横スワイプ */
    .calendar-shell {
        overflow-x: auto;
        border-radius: 18px;
    }

    .calendar-grid {
        min-width: 700px;
        grid-template-columns: repeat(7, minmax(98px, 1fr));
    }

    .calendar-day {
        min-height: 126px;
        padding: 10px;
        gap: 8px;
    }

    .weekday {
        padding: 10px 8px;
    }

    .calendar-day-body {
        grid-template-columns: 48px 1fr;
        gap: 6px;
    }

    .calendar-status-button {
        min-width: 48px;
        min-height: 36px;
        padding: 5px 6px;
        font-size: 11px;
    }

    .game-badge,
    .empty-badge {
        min-height: 36px;
        font-size: 13px;
        border-radius: 11px;
    }

    .reservation-label {
        margin-right: 0;
        padding: 0 6px;
    }

    /* フリー入力: iPhoneは横スワイプ前提。入力サイズは縮めない */
    .premium-ledger {
        min-width: 1120px;
    }

    .premium-ledger thead th {
        top: var(--header-height);
    }

    .premium-ledger input,
    .premium-ledger select {
        min-height: 48px;
        font-size: 16px;
    }

    .ledger-table input[type="time"] {
        width: 102px;
        min-width: 102px;
    }

    .player-cell {
        min-width: 112px;
    }

    .rank-cell {
        min-width: 72px;
    }

    .flag-cell,
    .flag-stack {
        min-width: 46px;
        width: 46px;
    }

    .sticky-actions,
    .mobile-sticky-form-actions,
    .form-actions,
    .reservation-actions {
        position: sticky;
        bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 8px);
        z-index: 30;
        padding: 10px;
        margin-top: 16px;
        border: 1px solid #d9e2ef;
        border-radius: 16px;
        background: rgba(255,255,255,.96);
        box-shadow: 0 12px 30px rgba(15,23,42,.14);
        backdrop-filter: blur(14px);
    }

    .form-actions,
    .reservation-actions,
    .mobile-sticky-form-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .form-actions .button,
    .reservation-actions .button,
    .mobile-sticky-form-actions .button {
        width: 100%;
        min-width: 0;
    }

    .ledger-actions {
        display: block;
    }

    .ledger-actions .muted {
        display: none;
    }

    /* 通常一覧をカード化。横スクロールよりiPhoneで確認しやすい */
    .responsive-card-table {
        min-width: 0;
    }

    .responsive-card-table thead {
        display: none;
    }

    .responsive-card-table,
    .responsive-card-table tbody,
    .responsive-card-table tr,
    .responsive-card-table td {
        display: block;
        width: 100%;
    }

    .responsive-card-table tbody {
        padding: 0;
    }

    .responsive-card-table tbody tr {
        margin-bottom: 12px;
        padding: 6px 12px;
        border: 1px solid #dbe3ef;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 8px 20px rgba(15,23,42,.05);
    }

    .responsive-card-table tbody tr:hover {
        background: #fff;
    }

    .responsive-card-table td {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 9px 2px;
        border-bottom: 1px solid #edf1f6;
        overflow-wrap: anywhere;
    }

    .responsive-card-table td:last-child {
        border-bottom: 0;
    }

    .responsive-card-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
    }

    .responsive-card-table .empty-row {
        display: block;
        padding: 24px 4px !important;
        text-align: center !important;
        border: 0;
    }

    .responsive-card-table .empty-row::before {
        display: none;
    }

    .responsive-card-table .action-cell,
    .responsive-card-table .reservation-action-cell {
        display: block;
    }

    .responsive-card-table .action-cell::before,
    .responsive-card-table .reservation-action-cell::before {
        display: block;
        margin-bottom: 7px;
    }

    .action-buttons,
    .reservation-action-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }

    .action-buttons .inline-form,
    .reservation-action-buttons .inline-form,
    .action-buttons .button,
    .reservation-action-buttons .button {
        width: 100%;
        min-width: 0;
    }

    /* プレイヤー一覧は主要情報を上に見せ、成績をコンパクトに */
    .player-list-table tbody tr {
        padding-top: 10px;
    }

    .player-list-table td[data-label="HN"] a {
        font-size: 18px;
        font-weight: 900;
    }

    .player-list-table td[data-label="ID"] a {
        font-variant-numeric: tabular-nums;
    }

    .card-form {
        padding: 18px 14px;
        border-radius: 18px;
    }

    .form-section + .form-section {
        margin-top: 22px;
        padding-top: 20px;
    }

    .section-description {
        margin-bottom: 14px;
        font-size: 13px;
    }

    textarea {
        min-height: 120px;
    }

    .profile-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .profile-stats .stat-card {
        min-height: 88px;
        padding: 12px;
    }

    .profile-stats .stat-card strong {
        font-size: 21px;
    }
}

/* 小さいiPhoneでも操作ボタンのラベルを潰さない */
@media (max-width: 390px) {
    .brand-title {
        display: none;
    }

    .hero-actions,
    .form-actions,
    .reservation-actions,
    .mobile-sticky-form-actions {
        grid-template-columns: 1fr;
    }

    .responsive-card-table td {
        grid-template-columns: 82px minmax(0, 1fr);
    }
}

/* desktopではiPhone専用ボトムナビを確実に非表示 */
.site-header .mobile-bottom-nav {
    display: none;
}

@media (max-width: 767px) {
    .site-header .mobile-bottom-nav {
        display: grid !important;
        gap: 2px;
        width: 100%;
    }

    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        min-width: 0;
    }
}

.phone-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =========================================================
   Modern Touch UI v2 - safe visual layer (2026-10-11)
   ---------------------------------------------------------
   IMPORTANT:
   - Keeps original HTML table semantics on the FREE ledger.
   - On iPhone/iPad the ledger stays horizontally scrollable.
   - No table-row -> CSS-grid conversion (iOS Safari stability).
   - Visual-only overrides are scoped and do not change form names/URLs.
   ========================================================= */
:root {
    --modern-bg: #f4f7f7;
    --modern-ink: #10282b;
    --modern-muted: #6c7d80;
    --modern-navy: #0b1725;
    --modern-teal: #0f766e;
    --modern-teal-dark: #0a5b55;
    --modern-teal-soft: #e8f6f3;
    --modern-gold: #d7aa45;
    --modern-gold-soft: #fff7e6;
    --modern-pink: #d94f86;
    --modern-line: #dbe6e7;
    --modern-shadow: 0 14px 36px rgba(16, 40, 43, .08);
    --modern-shadow-soft: 0 8px 22px rgba(16, 40, 43, .055);
    --modern-radius: 22px;
    --modern-radius-sm: 14px;
}

body {
    background:
        radial-gradient(circle at 88% -4%, rgba(15,118,110,.12), transparent 24%),
        radial-gradient(circle at -5% 14%, rgba(215,170,69,.10), transparent 20%),
        linear-gradient(180deg, #fbfdfd 0%, var(--modern-bg) 100%);
    color: var(--modern-ink);
}

/* ===== Header / navigation ===== */
.site-header {
    min-height: 76px;
    padding: 11px 22px;
    background: rgba(11, 23, 37, .94);
    border-bottom: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 12px 32px rgba(5,15,24,.18);
    backdrop-filter: blur(18px) saturate(135%);
    transition: box-shadow .18s ease, background .18s ease;
}

.site-header.is-scrolled {
    background: rgba(11, 23, 37, .985);
    box-shadow: 0 10px 30px rgba(5,15,24,.24);
}

.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

.brand-logo-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 6px 10px;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.16);
}

.brand-logo {
    display: block;
    height: 30px;
    width: auto;
    max-width: 146px;
}

.brand-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.site-header .brand-title {
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: .12em;
}

.site-header .brand-subtitle {
    color: #a9bdc1;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
}

.site-header .top-nav {
    gap: 6px;
}

.site-header .top-nav a {
    min-height: 46px;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #c8d5d8;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
}

.site-header .top-nav a:hover {
    color: #fff;
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.08);
}

.site-header .top-nav a.is-active {
    color: #fff;
    background: linear-gradient(135deg, rgba(15,118,110,.95), rgba(13,94,88,.95));
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 8px 18px rgba(5,62,58,.25);
}

.site-header .top-nav a.nav-create {
    color: #3d2e0d;
    background: linear-gradient(135deg, #f1d17e, var(--modern-gold));
    border-color: rgba(255,255,255,.16);
}

.nav-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===== Common page surfaces ===== */
.container {
    padding-top: 28px;
}

.page-hero,
.summary-card,
.card-form,
.table-scroll,
.calendar-shell,
.panel,
.hint-box,
.stats-grid {
    border-color: rgba(203,219,221,.92);
    box-shadow: var(--modern-shadow-soft);
}

.page-hero {
    position: relative;
    overflow: hidden;
    padding: 28px;
    border-radius: 26px;
    background:
        linear-gradient(125deg, rgba(15,118,110,.10), rgba(255,255,255,.96) 48%, rgba(215,170,69,.09));
}

.page-hero::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -70px;
    top: -90px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(15,118,110,.16), transparent 68%);
    pointer-events: none;
}

.page-title-row h1,
.hero-copy h1 {
    color: #10282b;
    font-weight: 950;
    letter-spacing: -.035em;
}

.info-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--modern-teal-soft);
    color: var(--modern-teal-dark);
    border: 1px solid #cce8e3;
    font-size: 12px;
    font-weight: 900;
}

.metric-card {
    border: 1px solid var(--modern-line);
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 24px rgba(16,40,43,.055);
}

.metric-card.premium {
    background: linear-gradient(135deg, #fff9eb, #fff);
    border-color: #ecd99f;
}

.metric-card strong,
.summary-card strong {
    color: #143b3d;
    font-variant-numeric: tabular-nums;
}

.summary-card {
    background: rgba(255,255,255,.93);
    border-radius: 22px;
}

/* ===== Buttons / controls ===== */
.button {
    border-radius: 14px;
    background: linear-gradient(135deg, #11867c, var(--modern-teal));
    box-shadow: 0 8px 18px rgba(15,118,110,.19);
}

.button:hover {
    background: linear-gradient(135deg, var(--modern-teal), var(--modern-teal-dark));
    box-shadow: 0 11px 23px rgba(15,118,110,.24);
}

.button.secondary {
    color: #245055;
    border-color: #ccdadd;
    background: rgba(255,255,255,.90);
}

.button.secondary:hover {
    color: #163e40;
    background: #f0f8f7;
    border-color: #b9d3d0;
}

.button.ghost {
    color: var(--modern-teal-dark);
}

input,
select,
textarea {
    border-color: #cbdadc;
    border-radius: 13px;
    background: #fff;
}

input:hover,
select:hover,
textarea:hover {
    border-color: #9fbfbd;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--modern-teal);
    box-shadow: 0 0 0 4px rgba(15,118,110,.12);
}

.flash.success {
    background: #ebfaf5;
    color: #086b51;
    border-color: #a9e4d3;
}

.flash.error {
    background: #fff1f2;
    color: #b4233d;
    border-color: #f3c1ca;
}

/* ===== Data tables ===== */
.data-table th,
.ledger-table th {
    color: #3d5558;
    background: #f0f7f6;
    border-color: #dbe6e7;
}

.data-table td,
.ledger-table td {
    border-color: #e4ecee;
}

.data-table tbody tr:hover {
    background: #f7fbfa;
}

.table-scroll {
    border-radius: 22px;
    background: rgba(255,255,255,.96);
}

/* ===== FREE ledger: keep table semantics; safe on Safari/iPad/iPhone ===== */
.ledger-scroll {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid var(--modern-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--modern-shadow-soft);
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.premium-ledger {
    min-width: 1180px;
    width: 100%;
    background: #fff;
}

.premium-ledger thead th {
    background: #edf6f4;
    color: #345255;
    border-color: #d4e3e2;
}

.premium-ledger thead tr:first-child th:nth-child(n+3):nth-child(-n+6) {
    background: #e8f5f2;
}

.premium-ledger tbody tr:nth-child(even) td {
    background: #fbfdfd;
}

.premium-ledger tbody tr:hover td {
    background: #f3faf8;
}

.premium-ledger .sticky-col {
    background: #f7fbfa;
    box-shadow: 8px 0 16px rgba(16,40,43,.035);
}

.premium-ledger thead .sticky-col {
    background: #e7f3f1;
}

.premium-ledger tbody tr.row-has-error td {
    background: #fff7f7;
}

.premium-ledger input,
.premium-ledger select {
    border-radius: 11px;
}

.premium-ledger .player-preview.found {
    color: #0a6e5d;
    background: #e9f8f3;
}

.premium-ledger .player-preview.missing,
.premium-ledger .cell-error,
.premium-ledger .row-error {
    color: #b4233d;
}

.flag-stack {
    border-radius: 11px;
}

.ledger-actions {
    border-color: #cfe1df;
}

/* ===== Calendar ===== */
.calendar-shell {
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
}

.premium-calendar {
    border-color: #dbe6e7;
    background: #dbe6e7;
}

.weekday {
    background: #edf6f4;
    color: #3d5659;
}

.calendar-day {
    background: rgba(255,255,255,.98);
}

.calendar-day:hover {
    background: #eff9f6;
}

.day-number.today {
    background: linear-gradient(135deg, #148c81, var(--modern-teal));
    box-shadow: 0 6px 14px rgba(15,118,110,.20);
}

.day-weekday {
    display: none;
}

.reservation-label {
    border-radius: 999px;
    background: var(--modern-gold-soft);
    color: #7c5b13;
    border: 1px solid #efdba4;
}

.free-button,
.free-table-link {
    color: var(--modern-pink);
}

/* ===== Statuses ===== */
.status-chip,
.status-reserved,
.status-visited,
.status-cancelled {
    border-radius: 999px;
}

/* ===== Forms ===== */
.card-form,
.edit-form-card,
.reservation-form-card {
    background: rgba(255,255,255,.96);
}

.form-section {
    border-color: #e2ebec;
}

/* ===== Motion: light only; disabled for users who prefer reduced motion ===== */
.button,
.metric-card,
.summary-card,
.calendar-day,
.responsive-card-table tbody tr {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

@media (hover: hover) and (pointer: fine) {
    .metric-card:hover,
    .summary-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--modern-shadow);
    }
}

/* ===== iPad / tablet ===== */
@media (min-width: 768px) and (max-width: 1180px) {
    .site-header {
        padding-left: 14px;
        padding-right: 14px;
    }

    .brand-subtitle {
        display: none;
    }

    .brand-logo {
        height: 27px;
        max-width: 124px;
    }

    .site-header .top-nav a {
        min-height: 44px;
        padding: 7px 9px;
        font-size: 12px;
    }

    .site-header .top-nav .nav-icon {
        width: 16px;
        height: 16px;
    }

    .page-hero {
        padding: 23px;
    }

    .ledger-scroll {
        border-radius: 18px;
    }
}

/* ===== Phone ===== */
@media (max-width: 767px) {
    body {
        background: #f5f8f8;
    }

    .site-header {
        min-height: 62px;
        padding: max(8px, env(safe-area-inset-top)) 12px 8px;
    }

    .brand-copy {
        display: none;
    }

    .brand-logo-card {
        min-height: 40px;
        padding: 5px 9px;
        border-radius: 12px;
    }

    .brand-logo {
        height: 25px;
        max-width: 120px;
    }

    .site-header .mobile-bottom-nav {
        left: 8px;
        right: 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
        width: auto;
        height: 68px;
        padding: 6px;
        border: 1px solid rgba(190,207,210,.9);
        border-radius: 22px;
        background: rgba(255,255,255,.96);
        box-shadow: 0 12px 34px rgba(16,40,43,.16);
    }

    .site-header .mobile-bottom-nav a {
        min-height: 54px;
        border-radius: 16px;
        color: #607477;
    }

    .site-header .mobile-bottom-nav a.is-active {
        color: #fff;
        background: linear-gradient(135deg, #168b81, var(--modern-teal));
        box-shadow: 0 7px 16px rgba(15,118,110,.18);
    }

    .container,
    .container.wide,
    .container.wide.ledger-page {
        padding-top: 16px;
        padding-left: 11px;
        padding-right: 11px;
    }

    .page-hero {
        padding: 18px 15px;
        border-radius: 20px;
    }

    .page-hero::after {
        width: 120px;
        height: 120px;
        right: -52px;
        top: -55px;
    }

    .hero-kpis,
    .hero-kpis-three {
        gap: 8px;
    }

    .metric-card {
        padding: 12px 13px;
        border-radius: 15px;
    }

    .summary-card {
        padding: 14px;
        border-radius: 18px;
    }

    .button,
    button,
    input,
    select {
        min-height: 48px;
    }

    /* FREE: intentionally remains a horizontally scrollable table.
       This is less flashy than row->card conversion, but it is stable on iOS Safari
       and preserves all 15 cells and their form controls exactly. */
    .screen-ledger .mobile-scroll-hint {
        display: block;
        margin: 0 0 8px;
        padding: 7px 10px;
        border-radius: 12px;
        background: #eaf6f4;
        color: #32635f;
        border: 1px solid #cfe5e1;
        font-size: 11px;
    }

    .screen-ledger .ledger-scroll {
        overflow-x: auto;
        overflow-y: visible;
        border: 1px solid #d5e3e3;
        border-radius: 17px;
        background: #fff;
    }

    .screen-ledger .premium-ledger {
        display: table;
        width: 1120px;
        min-width: 1120px;
    }

    .screen-ledger .premium-ledger thead {
        display: table-header-group;
    }

    .screen-ledger .premium-ledger tbody {
        display: table-row-group;
    }

    .screen-ledger .premium-ledger tbody tr {
        display: table-row;
    }

    .screen-ledger .premium-ledger tbody td,
    .screen-ledger .premium-ledger thead th {
        display: table-cell;
        width: auto;
    }

    .screen-ledger .premium-ledger .sticky-col {
        position: sticky;
        left: 0;
        z-index: 3;
    }

    .screen-ledger .premium-ledger thead .sticky-col {
        z-index: 8;
    }

    .screen-ledger .premium-ledger input[type="time"] {
        width: 100px;
        min-width: 100px;
    }

    .screen-ledger .premium-ledger .player-cell {
        min-width: 112px;
    }

    .screen-ledger .premium-ledger .rank-cell {
        min-width: 68px;
    }

    .screen-ledger .premium-ledger .flag-cell,
    .screen-ledger .premium-ledger .flag-stack {
        min-width: 48px;
        width: 48px;
    }

    .screen-ledger .premium-ledger input,
    .screen-ledger .premium-ledger select {
        font-size: 16px;
    }

    /* Lists keep the already-tested card conversion from the stable base CSS. */
    .responsive-card-table tbody tr {
        border-color: #dbe6e7;
        border-radius: 18px;
        box-shadow: var(--modern-shadow-soft);
    }

    .responsive-card-table td {
        border-color: #e7eeee;
    }

    .responsive-card-table td::before {
        color: #738487;
    }

    .sticky-actions,
    .mobile-sticky-form-actions,
    .form-actions,
    .reservation-actions {
        border-color: #cfddde;
        background: rgba(255,255,255,.97);
        box-shadow: 0 12px 30px rgba(16,40,43,.13);
    }

    .calendar-shell {
        border-radius: 18px;
    }

    .calendar-grid {
        min-width: 700px;
    }
}

@media (max-width: 390px) {
    .site-header .mobile-bottom-nav {
        left: 5px;
        right: 5px;
    }

    .site-header .mobile-bottom-nav a {
        font-size: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =====================================================================
   FREE ledger stability fix v2 (2026-10-11)
   - Single-row sticky header: prevents the two sticky header rows from
     overlapping and hiding game row 1 after vertical scrolling.
   - The ledger itself owns vertical/horizontal scrolling so sticky header
     behavior is deterministic on desktop, iPad and iPhone Safari.
   - Save actions no longer float over input rows.
   ===================================================================== */
.screen-ledger .ledger-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid #d7e5e4;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #f3faf8 100%);
}

.screen-ledger .ledger-table-toolbar > div {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
    min-width: 0;
}

.screen-ledger .ledger-table-toolbar strong {
    color: #173d40;
    font-size: 14px;
    font-weight: 900;
}

.screen-ledger .ledger-save-quick {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 9px 16px;
}

.screen-ledger .ledger-scroll {
    position: relative;
    width: 100%;
    max-height: min(64dvh, 640px);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
}

.screen-ledger .premium-ledger {
    width: 100%;
    min-width: 1180px;
    border-collapse: separate;
    border-spacing: 0;
}

/* Header is deliberately ONE row. All header cells use the same sticky top. */
.screen-ledger .premium-ledger thead th {
    position: sticky;
    top: 0 !important;
    z-index: 6;
    height: 62px;
    padding: 8px 10px;
    vertical-align: middle;
    background: #eaf5f2;
    color: #294d50;
    box-shadow: inset 0 -1px 0 #ccdedd;
}

.screen-ledger .premium-ledger thead tr:first-child th,
.screen-ledger .premium-ledger thead tr:nth-child(2) th {
    background: #eaf5f2;
}

.screen-ledger .premium-ledger thead .sticky-col {
    left: 0;
    z-index: 10;
    background: #dff0ec;
}

.screen-ledger .premium-ledger tbody .sticky-col {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #f6fbfa;
    box-shadow: 6px 0 12px rgba(20, 63, 66, .05);
}

.screen-ledger .premium-ledger .seat-head {
    min-width: 64px;
    text-align: center;
    line-height: 1.15;
}

.screen-ledger .premium-ledger .seat-head span,
.screen-ledger .premium-ledger .seat-head small {
    display: block;
}

.screen-ledger .premium-ledger .seat-head span {
    margin-bottom: 4px;
    color: #0b7469;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .02em;
}

.screen-ledger .premium-ledger .seat-head small {
    color: #50676a;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.screen-ledger .premium-ledger .seat-start {
    border-left: 2px solid #b9d7d2;
}

.screen-ledger .premium-ledger .seat-end {
    border-right: 2px solid #b9d7d2;
}

.screen-ledger .premium-ledger tbody td:nth-child(3),
.screen-ledger .premium-ledger tbody td:nth-child(6),
.screen-ledger .premium-ledger tbody td:nth-child(9),
.screen-ledger .premium-ledger tbody td:nth-child(12) {
    border-left: 2px solid #d7e8e5;
}

.screen-ledger .premium-ledger tbody td:nth-child(5),
.screen-ledger .premium-ledger tbody td:nth-child(8),
.screen-ledger .premium-ledger tbody td:nth-child(11),
.screen-ledger .premium-ledger tbody td:nth-child(14) {
    border-right: 2px solid #d7e8e5;
}

.screen-ledger .premium-ledger tbody tr:first-child td {
    border-top: 0;
}

/* Avoid the bottom save panel covering game rows while the user is entering data. */
.screen-ledger .ledger-actions {
    position: static !important;
    bottom: auto !important;
    margin-top: 14px;
}

@media (min-width: 768px) and (max-width: 1180px) {
    .screen-ledger .ledger-scroll {
        max-height: 62dvh;
    }

    .screen-ledger .premium-ledger {
        min-width: 1120px;
    }
}

@media (max-width: 767px) {
    .screen-ledger .ledger-table-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
        padding: 11px;
    }

    .screen-ledger .ledger-table-toolbar .muted {
        font-size: 11px;
    }

    .screen-ledger .ledger-save-quick {
        width: 100%;
    }

    .screen-ledger .ledger-scroll {
        max-height: 58dvh;
        overflow: auto;
    }

    .screen-ledger .premium-ledger {
        width: 1120px;
        min-width: 1120px;
    }

    .screen-ledger .premium-ledger thead th {
        top: 0 !important;
        height: 58px;
        padding: 7px 8px;
    }

    .screen-ledger .premium-ledger .seat-head small {
        font-size: 10px;
    }
}

/* =====================================================================
   Responsive stability v3 (2026-10-11)
   iPad mini / 8-inch-class portrait (768-900 CSS px)
   ---------------------------------------------------------------------
   Previous tablet rules treated 768px as desktop/tablet while phone rules
   stopped at 767px. That boundary allowed navigation labels and calendar
   metrics to be squeezed into unusably narrow columns. The rules below
   deliberately preserve readable widths and scroll where necessary instead
   of wrapping Japanese labels one character per line.
   ===================================================================== */
@media (min-width: 768px) and (max-width: 900px) {
    :root {
        --header-height: 68px;
    }

    .site-header {
        min-height: var(--header-height) !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding: max(8px, env(safe-area-inset-top)) 10px 8px !important;
    }

    /* Give navigation the space on portrait tablets. SYSTEM copy is decorative. */
    .site-header .brand-copy {
        display: none !important;
    }

    .site-header .brand {
        flex: 0 0 auto !important;
        min-width: 0;
    }

    .brand-logo-card {
        min-height: 38px !important;
        padding: 4px 7px !important;
        border-radius: 11px !important;
    }

    .brand-logo {
        height: 24px !important;
        max-width: 108px !important;
    }

    .site-header .top-nav {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 0;
        width: auto !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 3px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .site-header .top-nav::-webkit-scrollbar {
        display: none;
    }

    .site-header .top-nav a {
        flex: 0 0 auto !important;
        min-width: max-content !important;
        min-height: 42px !important;
        padding: 6px 7px !important;
        gap: 4px !important;
        font-size: 11px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }

    .site-header .top-nav .nav-icon {
        width: 15px !important;
        height: 15px !important;
    }

    /* Never split short action labels into vertical Japanese text. */
    .button,
    button,
    .status-chip,
    .table-status,
    .reservation-label {
        white-space: nowrap;
        word-break: keep-all;
    }

    /* Calendar: preserve readable day cells. Portrait tablets scroll sideways
       rather than compressing 7 columns until duration text becomes vertical. */
    .screen-calendar .calendar-shell {
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .screen-calendar .calendar-grid {
        min-width: 980px !important;
        grid-template-columns: repeat(7, minmax(132px, 1fr)) !important;
    }

    .screen-calendar .calendar-day {
        min-height: 132px !important;
        padding: 10px !important;
    }

    .screen-calendar .calendar-day-body {
        grid-template-columns: 52px minmax(68px, 1fr) !important;
        gap: 7px !important;
    }

    .screen-calendar .calendar-status-button {
        min-width: 52px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        white-space: nowrap !important;
    }

    .screen-calendar .game-badge,
    .screen-calendar .empty-badge {
        min-width: 68px !important;
        width: auto !important;
        padding: 4px 7px !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }

    /* Wide data tables must scroll on portrait tablets instead of squeezing
       labels / controls. Phone-only card layout still begins below 768px. */
    .screen-table .table-scroll,
    .screen-reservations-list .table-scroll,
    .screen-players-list .table-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .screen-table .responsive-card-table {
        min-width: 900px !important;
    }

    .screen-reservations-list .responsive-card-table {
        min-width: 960px !important;
    }

    .screen-players-list .responsive-card-table {
        min-width: 1040px !important;
    }

    /* FREE entry already scrolls horizontally; keep every form control usable. */
    .screen-ledger .ledger-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .screen-ledger .premium-ledger {
        min-width: 1180px !important;
    }

    /* Portrait tablet forms: one clear column is more usable than cramped grids. */
    .screen-player-form .form-grid,
    .screen-reservation-form .reservation-grid {
        grid-template-columns: 1fr !important;
    }

    .screen-player-form .form-field.full,
    .screen-reservation-form .form-field-full {
        grid-column: 1 !important;
    }
}


/* =====================================================================
   Authentication / staff administration (2026-10-16)
   ===================================================================== */
.header-logout-form {
    display: inline-flex;
    margin: 0;
}

.header-logout-button {
    min-height: 46px;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 13px;
    background: rgba(255,255,255,.055);
    color: #d7e1e4;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.header-logout-button:hover {
    background: rgba(255,255,255,.11);
    color: #fff;
}

.site-header .top-nav a.nav-admin {
    color: #d9f5ef;
    border-color: rgba(52,211,153,.16);
}

.mobile-header-actions {
    display: none;
}

.screen-login {
    min-height: 100dvh;
    background:
        radial-gradient(circle at 15% 10%, rgba(15,118,110,.22), transparent 30%),
        radial-gradient(circle at 90% 90%, rgba(215,170,69,.18), transparent 30%),
        linear-gradient(145deg, #07131f 0%, #0d2430 48%, #102f31 100%);
}

.login-page {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
}

.login-card {
    width: min(100%, 520px);
    padding: clamp(24px, 5vw, 42px);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 28px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 26px 70px rgba(0,0,0,.28);
}

.login-brand {
    display: grid;
    gap: 18px;
    margin-bottom: 28px;
}

.login-logo-card {
    width: fit-content;
    border: 1px solid #d9e3e7;
}

.login-logo {
    height: 34px;
    max-width: 180px;
}

.login-eyebrow {
    margin: 0 0 4px;
    color: #0f766e;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .14em;
}

.login-card h1 {
    font-size: clamp(28px, 6vw, 38px);
}

.login-form {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.login-submit {
    width: 100%;
    margin-top: 4px;
}

.login-note {
    margin: 20px 0 0;
    color: #667085;
    font-size: 12px;
    text-align: center;
}

.admin-guide-card {
    margin-bottom: 18px;
}

.staff-user-table .is-deleted {
    opacity: .58;
    background: #f8fafc;
}

.staff-role-badge,
.staff-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.staff-role-badge.admin {
    color: #6b4700;
    background: #fff4cc;
    border: 1px solid #f2d36b;
}

.staff-role-badge.staff {
    color: #0b625c;
    background: #e9faf6;
    border: 1px solid #b7e6dc;
}

.staff-status-badge.active {
    color: #166534;
    background: #ecfdf3;
    border: 1px solid #bbf7d0;
}

.staff-status-badge.deleted {
    color: #7f1d1d;
    background: #fff1f2;
    border: 1px solid #fecdd3;
}

.button.danger {
    color: #b42318;
    background: #fff5f4;
    border-color: #fecdca;
    box-shadow: none;
}

.button.danger:hover {
    color: #fff;
    background: #b42318;
    border-color: #b42318;
}

.field-help {
    display: block;
    margin-top: 6px;
    color: #667085;
    font-size: 12px;
}

.admin-check-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 17px 18px;
    border: 1px solid #cfe1e1;
    border-radius: 16px;
    background: #f4fbfa;
    cursor: pointer;
}

.admin-check-card input[type=checkbox] {
    width: 24px;
    height: 24px;
    min-height: 24px;
    margin-top: 1px;
    accent-color: #0f766e;
}

.admin-check-card span {
    display: grid;
    gap: 3px;
}

.admin-check-card strong {
    color: #12393a;
}

.admin-check-card small {
    color: #667085;
    line-height: 1.5;
}

.staff-user-form input[disabled] {
    color: #475467;
    background: #f2f4f7;
    cursor: not-allowed;
}

@media (max-width: 1024px) {
    .screen-admin-staff .staff-user-table {
        min-width: 860px;
    }
}

@media (max-width: 767px) {
    .site-header {
        position: sticky;
    }

    .mobile-header-actions {
        position: absolute;
        right: 8px;
        top: max(8px, env(safe-area-inset-top));
        display: flex;
        align-items: center;
        gap: 5px;
        z-index: 2;
    }

    .mobile-header-actions form {
        margin: 0;
    }

    .mobile-admin-button,
    .mobile-logout-button {
        min-height: 36px;
        padding: 6px 9px;
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,.12);
        color: #fff;
        background: rgba(255,255,255,.08);
        font-size: 10px;
        font-weight: 900;
        white-space: nowrap;
    }

    .mobile-admin-button {
        background: rgba(15,118,110,.9);
    }

    .mobile-logout-button {
        cursor: pointer;
    }

    .screen-admin-staff .staff-user-table {
        min-width: 0 !important;
    }

    .screen-admin-staff-form .card-form {
        padding: 18px;
    }

    .login-card {
        border-radius: 22px;
    }
}


/* =====================================================================
   Password visibility control + admin header icon polish (2026-10-16)
   ===================================================================== */
.password-input-wrap {
    position: relative;
    width: 100%;
}

.password-input-wrap > input {
    width: 100%;
    padding-right: 54px !important;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #667085;
    box-shadow: none;
    cursor: pointer;
    z-index: 2;
}

.password-toggle:hover {
    color: #0f766e;
    background: #edf8f6;
}

.password-toggle:focus-visible {
    outline: 3px solid rgba(15,118,110,.22);
    outline-offset: 1px;
}

.password-toggle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.password-toggle .eye-closed {
    display: none;
}

.password-toggle.is-visible .eye-open {
    display: none;
}

.password-toggle.is-visible .eye-closed {
    display: block;
}

.site-header .top-nav a.nav-admin .nav-icon {
    overflow: visible;
}

@media (max-width: 767px) {
    .password-toggle {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        right: 5px;
    }

    .password-input-wrap > input {
        padding-right: 58px !important;
    }
}


/* Login password visibility button (explicit login-page override) */
.screen-login .login-password-toggle {
    color: #475467;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.32);
}

.screen-login .login-password-toggle:hover,
.screen-login .login-password-toggle:focus-visible {
    color: #0f766e;
    background: #edf8f6;
}


/* =====================================================================
   Admin staff search + phone hamburger navigation (2026-10-16)
   ===================================================================== */
.admin-staff-search-card {
    margin: 0 0 20px;
    padding: 18px 20px;
    border: 1px solid #d7e4e6;
    border-radius: 20px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 28px rgba(16,40,43,.06);
}

.admin-staff-search-form {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    align-items: end;
    gap: 10px;
}

.admin-staff-search-field {
    min-width: 0;
}

.admin-staff-search-field input {
    min-height: 48px;
}

.admin-search-button,
.admin-search-clear {
    min-height: 48px;
}

.admin-search-result {
    margin: 12px 2px 0;
    color: #667085;
    font-size: 13px;
}

.mobile-menu-toggle,
.mobile-menu-panel,
.mobile-menu-backdrop {
    display: none;
}

@media (max-width: 767px) {
    .site-header {
        justify-content: space-between !important;
    }

    .site-header .brand {
        width: auto !important;
        max-width: calc(100% - 58px);
    }

    .site-header .brand-link {
        width: auto !important;
        justify-content: flex-start !important;
    }

    /* Previous tiny admin/logout buttons are replaced by one reliable menu. */
    .mobile-header-actions {
        display: none !important;
    }

    .mobile-menu-toggle {
        position: relative;
        z-index: 132;
        display: inline-grid;
        place-items: center;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid rgba(255,255,255,.15);
        border-radius: 14px;
        background: rgba(255,255,255,.08);
        color: #fff;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-menu-toggle:active {
        background: rgba(255,255,255,.15);
    }

    .mobile-menu-icon {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }

    .mobile-menu-toggle .menu-close-icon {
        display: none;
    }

    .mobile-menu-toggle.is-open .menu-open-icon {
        display: none;
    }

    .mobile-menu-toggle.is-open .menu-close-icon {
        display: block;
    }

    .mobile-menu-backdrop:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 129;
        display: block;
        background: rgba(4,15,24,.45);
        backdrop-filter: blur(2px);
    }

    .site-header .mobile-menu-panel:not([hidden]) {
        position: fixed;
        top: calc(max(8px, env(safe-area-inset-top)) + 60px);
        left: 10px;
        right: 10px;
        z-index: 131;
        display: block !important;
        max-height: calc(100dvh - 86px - env(safe-area-inset-bottom));
        overflow-y: auto;
        padding: 12px;
        border: 1px solid rgba(196,215,217,.96);
        border-radius: 20px;
        background: rgba(255,255,255,.985);
        box-shadow: 0 24px 64px rgba(4,15,24,.28);
        color: #123438;
    }

    .mobile-menu-user {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 6px 12px;
        border-bottom: 1px solid #e4eded;
    }

    .mobile-menu-kicker {
        color: #0f766e;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .12em;
    }

    .mobile-menu-user strong {
        font-size: 14px;
    }

    .site-header .mobile-menu-links {
        display: grid;
        gap: 5px;
        padding: 8px 0;
    }

    .site-header .mobile-menu-links a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 48px;
        padding: 10px 12px;
        border: 0;
        border-radius: 13px;
        color: #203d41;
        background: transparent;
        font-size: 14px;
        font-weight: 800;
    }

    .site-header .mobile-menu-links a.is-active {
        color: #0b625c;
        background: #e8f7f4;
    }

    .site-header .mobile-menu-links a.mobile-menu-admin {
        color: #6f510e;
        background: #fff8df;
    }

    .mobile-menu-logout-form {
        margin: 2px 0 0;
        padding-top: 10px;
        border-top: 1px solid #e4eded;
    }

    .mobile-menu-logout-button {
        width: 100%;
        min-height: 48px;
        border: 1px solid #f4c7c3;
        border-radius: 13px;
        background: #fff5f4;
        color: #b42318;
        font: inherit;
        font-size: 14px;
        font-weight: 900;
        cursor: pointer;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    .admin-staff-search-card {
        padding: 14px;
        border-radius: 17px;
    }

    .admin-staff-search-form {
        grid-template-columns: 1fr 1fr;
    }

    .admin-staff-search-field {
        grid-column: 1 / -1;
    }

    .admin-search-button,
    .admin-search-clear {
        width: 100%;
    }

    .admin-search-button:last-child {
        grid-column: 1 / -1;
    }
}

/* =====================================================================
   Hamburger visibility hotfix (2026-10-16)
   ---------------------------------------------------------------------
   .site-header nav { display:flex } is an older global rule with higher
   specificity than the first mobile-menu declaration. It caused the hidden
   drawer to participate in desktop header layout. Keep every mobile-menu
   layer forcibly hidden outside phone mode, then opt it in only below 768px.
   ===================================================================== */
.site-header .mobile-menu-toggle,
.site-header .mobile-menu-panel,
.site-header .mobile-menu-backdrop {
    display: none !important;
}

.site-header .mobile-menu-panel[hidden],
.site-header .mobile-menu-backdrop[hidden] {
    display: none !important;
}

@media (max-width: 767px) {
    .site-header .mobile-menu-toggle {
        display: inline-grid !important;
    }

    .site-header .mobile-menu-panel:not([hidden]) {
        display: block !important;
    }

    .site-header .mobile-menu-backdrop:not([hidden]) {
        display: block !important;
    }
}

/* =====================================================================
   Mobile header / hamburger navigation v2 (2026-10-16)
   ---------------------------------------------------------------------
   Phone UI uses one compact header: JOKER logo + hamburger button.
   The former five-item bottom nav was removed because a backdrop-filter on
   the sticky header can make fixed descendants behave like header-contained
   elements in Chromium/Safari, causing the nav to jump into the header.
   ===================================================================== */
@media (max-width: 767px) {
    :root {
        --header-height: 64px;
    }

    body {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }

    .site-header {
        position: sticky !important;
        top: 0;
        min-height: var(--header-height) !important;
        width: 100%;
        padding: max(8px, env(safe-area-inset-top)) 12px 8px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        overflow: visible !important;
        /* Avoid creating a containing block for the fixed drawer/backdrop. */
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: #0b1725 !important;
        z-index: 120 !important;
    }

    .site-header .brand {
        display: flex !important;
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: calc(100% - 58px) !important;
        min-width: 0 !important;
    }

    .site-header .brand-link {
        display: inline-flex !important;
        width: auto !important;
        max-width: 100%;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 0 !important;
    }

    .site-header .brand-copy {
        display: none !important;
    }

    .site-header .brand-logo-card {
        min-height: 42px !important;
        padding: 5px 9px !important;
        border-radius: 12px !important;
    }

    .site-header .brand-logo {
        height: 27px !important;
        max-width: 132px !important;
    }

    .site-header .top-nav {
        display: none !important;
    }

    .site-header .mobile-menu-toggle {
        position: relative !important;
        inset: auto !important;
        z-index: 133 !important;
        display: inline-grid !important;
        place-items: center !important;
        flex: 0 0 46px !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 1px solid rgba(255,255,255,.16) !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,.09) !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    .site-header .mobile-menu-toggle .mobile-menu-icon {
        width: 25px !important;
        height: 25px !important;
    }

    .site-header .mobile-menu-backdrop:not([hidden]) {
        position: fixed !important;
        inset: 0 !important;
        z-index: 129 !important;
        display: block !important;
        background: rgba(4,15,24,.52) !important;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }

    .site-header .mobile-menu-panel:not([hidden]) {
        position: fixed !important;
        top: calc(max(8px, env(safe-area-inset-top)) + 60px) !important;
        left: 10px !important;
        right: 10px !important;
        bottom: auto !important;
        z-index: 131 !important;
        display: block !important;
        width: auto !important;
        max-height: calc(100dvh - 80px - env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        padding: 12px !important;
        border: 1px solid #c9d9da !important;
        border-radius: 20px !important;
        background: #fff !important;
        color: #123438 !important;
        box-shadow: 0 24px 64px rgba(4,15,24,.30) !important;
    }

    .site-header .mobile-menu-links {
        display: grid !important;
        gap: 5px !important;
        width: 100% !important;
        padding: 8px 0 !important;
    }

    .site-header .mobile-menu-links a {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 48px !important;
        padding: 10px 12px !important;
        border: 0 !important;
        border-radius: 13px !important;
        color: #203d41 !important;
        background: transparent !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
    }

    .site-header .mobile-menu-links a.is-active {
        color: #0b625c !important;
        background: #e8f7f4 !important;
    }

    .site-header .mobile-menu-links a.mobile-menu-admin {
        color: #6f510e !important;
        background: #fff8df !important;
    }

    .site-header .mobile-menu-logout-form {
        display: block !important;
        width: 100% !important;
    }

    .site-header .mobile-menu-logout-button {
        width: 100% !important;
        min-height: 48px !important;
    }

    /* Old bottom nav no longer participates in phone layout, even if an old
       cached fragment is temporarily served. */
    .site-header .mobile-bottom-nav,
    .mobile-bottom-nav {
        display: none !important;
    }

    .sticky-actions,
    .mobile-sticky-form-actions,
    .form-actions,
    .reservation-actions {
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }
}

/* =====================================================================
   Responsive device audit v4 (2026-10-16)
   ---------------------------------------------------------------------
   Final responsive authority for kiosk/tablet/phone use.
   - Desktop navigation only when there is enough horizontal room.
   - iPad/tablet portrait and phones use one hamburger menu.
   - Page content never relies on shrinking Japanese labels vertically.
   - Wide operational tables/calendar scroll inside their own container only.
   ===================================================================== */

/* Keep the global page from becoming wider than the viewport. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg {
    max-width: 100%;
}

.site-header,
.site-header * {
    min-width: 0;
}

.site-header .top-nav a,
.site-header .header-logout-button,
.mobile-menu-toggle,
.mobile-menu-panel a,
.button,
.status-chip,
.table-status,
.reservation-label {
    word-break: keep-all;
    overflow-wrap: normal;
}

/* Desktop / wide landscape: keep the normal navigation. */
@media (min-width: 1101px) {
    .site-header .top-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        overflow: visible !important;
    }

    .site-header .top-nav a {
        white-space: nowrap !important;
    }

    .site-header .mobile-menu-toggle,
    .site-header .mobile-menu-panel,
    .site-header .mobile-menu-backdrop {
        display: none !important;
    }
}

/* Tablet portrait / compact landscape: use the same reliable menu as phones. */
@media (max-width: 1100px) {
    :root {
        --header-height: 68px;
    }

    body {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }

    .site-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 120 !important;
        width: 100% !important;
        min-height: var(--header-height) !important;
        padding: max(8px, env(safe-area-inset-top)) 16px 8px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        overflow: visible !important;
        background: #0b1725 !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .site-header .brand {
        display: flex !important;
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 62px) !important;
    }

    .site-header .brand-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: auto !important;
        max-width: 100% !important;
        gap: 10px !important;
    }

    .site-header .brand-logo-card {
        flex: 0 0 auto !important;
        min-height: 42px !important;
        padding: 5px 9px !important;
        border-radius: 12px !important;
    }

    .site-header .brand-logo {
        display: block !important;
        width: auto !important;
        height: 27px !important;
        max-width: 136px !important;
    }

    .site-header .brand-copy {
        display: flex !important;
        flex-direction: column !important;
    }

    .site-header .brand-title {
        font-size: 12px !important;
    }

    .site-header .brand-subtitle {
        display: none !important;
    }

    .site-header .top-nav,
    .mobile-header-actions,
    .site-header .mobile-bottom-nav {
        display: none !important;
    }

    .site-header .mobile-menu-toggle {
        position: relative !important;
        inset: auto !important;
        z-index: 133 !important;
        display: inline-grid !important;
        place-items: center !important;
        flex: 0 0 48px !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(255,255,255,.16) !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,.09) !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    .site-header .mobile-menu-toggle .mobile-menu-icon {
        width: 25px !important;
        height: 25px !important;
    }

    .site-header .mobile-menu-backdrop:not([hidden]) {
        position: fixed !important;
        inset: 0 !important;
        z-index: 129 !important;
        display: block !important;
        background: rgba(4,15,24,.52) !important;
        -webkit-backdrop-filter: blur(2px) !important;
        backdrop-filter: blur(2px) !important;
    }

    .site-header .mobile-menu-panel:not([hidden]) {
        position: fixed !important;
        top: calc(max(8px, env(safe-area-inset-top)) + 62px) !important;
        left: 14px !important;
        right: 14px !important;
        bottom: auto !important;
        z-index: 131 !important;
        display: block !important;
        width: auto !important;
        max-width: 680px !important;
        max-height: calc(100dvh - 88px - env(safe-area-inset-bottom)) !important;
        margin-left: auto !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        padding: 12px !important;
        border: 1px solid #c9d9da !important;
        border-radius: 20px !important;
        background: #fff !important;
        color: #123438 !important;
        box-shadow: 0 24px 64px rgba(4,15,24,.30) !important;
    }

    .site-header .mobile-menu-links {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
        padding: 10px 0 !important;
    }

    .site-header .mobile-menu-links a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 50px !important;
        padding: 10px 12px !important;
        border: 0 !important;
        border-radius: 13px !important;
        background: #f7faf9 !important;
        color: #203d41 !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }

    .site-header .mobile-menu-links a.is-active {
        color: #0b625c !important;
        background: #e8f7f4 !important;
    }

    .site-header .mobile-menu-links a.mobile-menu-admin {
        color: #6f510e !important;
        background: #fff8df !important;
    }

    .mobile-menu-user {
        padding: 6px 6px 12px !important;
    }

    .site-header .mobile-menu-logout-form {
        display: block !important;
        width: 100% !important;
        margin: 6px 0 0 !important;
        padding: 12px 0 0 !important;
        border-top: 1px solid #e3ecec !important;
    }

    .site-header .mobile-menu-logout-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        width: 100% !important;
        min-height: 52px !important;
        padding: 10px 16px !important;
        border: 1px solid #f2c3bd !important;
        border-radius: 14px !important;
        background: linear-gradient(180deg, #fff8f7 0%, #fff1ef 100%) !important;
        color: #b42318 !important;
        font: inherit !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        letter-spacing: .01em !important;
        box-shadow: 0 6px 18px rgba(180,35,24,.06) !important;
        cursor: pointer !important;
        transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease !important;
    }

    .site-header .mobile-menu-logout-button:hover {
        background: #ffecea !important;
        border-color: #eaa79f !important;
        box-shadow: 0 8px 22px rgba(180,35,24,.10) !important;
    }

    .site-header .mobile-menu-logout-button:active {
        transform: scale(.985) !important;
    }

    .site-header .mobile-menu-logout-icon {
        display: inline-grid !important;
        place-items: center !important;
        width: 20px !important;
        height: 20px !important;
        flex: 0 0 20px !important;
    }

    .site-header .mobile-menu-logout-icon svg {
        width: 20px !important;
        height: 20px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 2 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    body.mobile-menu-open {
        overflow: hidden !important;
    }

    .container,
    .container.wide,
    .container.wide.ledger-page {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .page-title-row {
        gap: 14px !important;
    }

    /* Calendar hero becomes a clean vertical dashboard on portrait tablets. */
    .screen-calendar .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .screen-calendar .hero-copy {
        min-width: 0 !important;
    }

    .screen-calendar .hero-copy .muted {
        max-width: 100% !important;
    }

    .screen-calendar .hero-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .screen-calendar .calendar-toolbar-card {
        display: grid !important;
        grid-template-columns: minmax(220px, .8fr) minmax(420px, 1.2fr) !important;
        align-items: end !important;
        gap: 18px !important;
    }

    .screen-calendar .calendar-toolbar-card .inline-form {
        display: grid !important;
        grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) auto !important;
        align-items: end !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* Calendar keeps readable day cells and scrolls within its own shell. */
    .screen-calendar .calendar-shell {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
    }

    .screen-calendar .calendar-grid {
        width: max-content !important;
        min-width: 940px !important;
        grid-template-columns: repeat(7, 134px) !important;
    }

    .screen-calendar .weekday {
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    .screen-calendar .calendar-day {
        min-width: 0 !important;
        min-height: 132px !important;
        padding: 10px !important;
    }

    .screen-calendar .calendar-day-body {
        grid-template-columns: 52px minmax(62px, 1fr) !important;
        gap: 7px !important;
    }

    .screen-calendar .calendar-status-button,
    .screen-calendar .game-badge,
    .screen-calendar .empty-badge {
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }

    .screen-calendar .game-badge,
    .screen-calendar .empty-badge {
        min-width: 62px !important;
        width: auto !important;
        padding: 4px 6px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    /* Large operational tables scroll horizontally on tablet portrait. */
    .table-scroll,
    .ledger-scroll {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
    }

    .screen-table .responsive-card-table {
        min-width: 900px !important;
    }

    .screen-reservations-list .responsive-card-table {
        min-width: 960px !important;
    }

    .screen-players-list .responsive-card-table {
        min-width: 1040px !important;
    }

    .screen-admin-staff .responsive-card-table {
        min-width: 860px !important;
    }

    .screen-ledger .premium-ledger {
        min-width: 1180px !important;
    }
}

/* iPad mini / 8-inch portrait: stack toolbars and keep touch targets large. */
@media (min-width: 768px) and (max-width: 860px) {
    .site-header {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .site-header .brand-copy {
        display: none !important;
    }

    .site-header .mobile-menu-panel:not([hidden]) {
        left: 10px !important;
        right: 10px !important;
        max-width: none !important;
    }

    .screen-calendar .page-hero {
        padding: 20px !important;
    }

    .screen-calendar .hero-kpis {
        grid-template-columns: 1fr 1fr !important;
    }

    .screen-calendar .calendar-toolbar-card {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    .screen-calendar .calendar-toolbar-card > div:first-child {
        text-align: left !important;
    }

    .screen-calendar .calendar-toolbar-card .inline-form {
        grid-template-columns: 1fr 1fr !important;
    }

    .screen-calendar .calendar-toolbar-card .inline-form .button {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .page-title-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .page-title-row > .button,
    .page-title-row > .actions {
        align-self: stretch !important;
    }

    .page-title-row > .button {
        width: 100% !important;
    }

    .screen-player-form .form-grid,
    .screen-reservation-form .reservation-grid,
    .screen-admin-staff-form .form-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Phone: single-column content, hamburger drawer, horizontal calendar/table only where needed. */
@media (max-width: 767px) {
    :root {
        --header-height: 62px;
    }

    .site-header {
        padding: max(8px, env(safe-area-inset-top)) 12px 8px !important;
    }

    .site-header .brand-copy {
        display: none !important;
    }

    .site-header .brand-logo-card {
        min-height: 40px !important;
        padding: 5px 8px !important;
    }

    .site-header .brand-logo {
        height: 25px !important;
        max-width: 122px !important;
    }

    .site-header .mobile-menu-toggle {
        flex-basis: 44px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .site-header .mobile-menu-panel:not([hidden]) {
        top: calc(max(8px, env(safe-area-inset-top)) + 58px) !important;
        left: 8px !important;
        right: 8px !important;
        max-width: none !important;
        max-height: calc(100dvh - 76px - env(safe-area-inset-bottom)) !important;
        border-radius: 18px !important;
    }

    .site-header .mobile-menu-links {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    .container,
    .container.wide,
    .container.wide.ledger-page {
        padding-top: 14px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 48px !important;
    }

    .page-hero {
        padding: 18px 14px !important;
        border-radius: 20px !important;
    }

    .page-title-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .page-title-row h1,
    .hero-copy h1 {
        font-size: clamp(28px, 9vw, 38px) !important;
    }

    .hero-actions,
    .actions,
    .form-actions {
        width: 100% !important;
    }

    .hero-actions .button {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 132px !important;
    }

    .screen-calendar .hero-kpis {
        grid-template-columns: 1fr !important;
    }

    .screen-calendar .calendar-toolbar-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        gap: 14px !important;
        padding: 14px !important;
    }

    .screen-calendar .calendar-toolbar-card .inline-form {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 9px !important;
    }

    .screen-calendar .calendar-toolbar-card .inline-form .button {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .screen-calendar .calendar-grid {
        min-width: 840px !important;
        grid-template-columns: repeat(7, 120px) !important;
    }

    .screen-calendar .calendar-day {
        min-height: 124px !important;
        padding: 9px !important;
    }

    .mobile-scroll-hint {
        display: block !important;
        margin: 4px 2px 8px !important;
        color: #607477 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    /* Phone list screens use their existing card conversion; remove forced tablet widths. */
    .screen-table .responsive-card-table,
    .screen-reservations-list .responsive-card-table,
    .screen-players-list .responsive-card-table,
    .screen-admin-staff .responsive-card-table {
        min-width: 0 !important;
        width: 100% !important;
    }

    .screen-player-form .form-grid,
    .screen-reservation-form .reservation-grid,
    .screen-admin-staff-form .form-grid {
        grid-template-columns: 1fr !important;
    }

    .admin-staff-search-form {
        grid-template-columns: 1fr !important;
    }

    .admin-staff-search-field,
    .admin-search-button,
    .admin-search-clear {
        grid-column: 1 !important;
        width: 100% !important;
    }

    .screen-login .login-card {
        width: min(100%, 460px) !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 390px) {
    .site-header .brand-logo {
        height: 23px !important;
        max-width: 108px !important;
    }

    .site-header .mobile-menu-toggle {
        flex-basis: 42px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    .hero-actions .button {
        flex-basis: 100% !important;
    }

    .screen-calendar .calendar-toolbar-card .inline-form {
        grid-template-columns: 1fr !important;
    }

    .screen-calendar .calendar-toolbar-card .inline-form .button {
        grid-column: 1 !important;
    }
}

/* v4.1 tablet icon + compact-table refinements */
@media (max-width: 1100px) {
    .site-header .mobile-menu-icon {
        display: block !important;
        width: 25px !important;
        height: 25px !important;
        max-width: none !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 2 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    .site-header .mobile-menu-toggle .menu-close-icon {
        display: none !important;
    }

    .site-header .mobile-menu-toggle.is-open .menu-open-icon {
        display: none !important;
    }

    .site-header .mobile-menu-toggle.is-open .menu-close-icon {
        display: block !important;
    }
}

@media (min-width: 768px) and (max-width: 860px) {
    .screen-calendar .hero-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .screen-calendar .hero-actions .button {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* On small portrait tablets, operational lists are faster to scan as cards
       than as a clipped wide table. All affected templates carry data-label. */
    .screen-table .responsive-card-table,
    .screen-reservations-list .responsive-card-table,
    .screen-players-list .responsive-card-table,
    .screen-admin-staff .responsive-card-table {
        min-width: 0 !important;
        width: 100% !important;
    }

    .screen-table .responsive-card-table thead,
    .screen-reservations-list .responsive-card-table thead,
    .screen-players-list .responsive-card-table thead,
    .screen-admin-staff .responsive-card-table thead {
        display: none !important;
    }

    .screen-table .responsive-card-table,
    .screen-table .responsive-card-table tbody,
    .screen-table .responsive-card-table tr,
    .screen-table .responsive-card-table td,
    .screen-reservations-list .responsive-card-table,
    .screen-reservations-list .responsive-card-table tbody,
    .screen-reservations-list .responsive-card-table tr,
    .screen-reservations-list .responsive-card-table td,
    .screen-players-list .responsive-card-table,
    .screen-players-list .responsive-card-table tbody,
    .screen-players-list .responsive-card-table tr,
    .screen-players-list .responsive-card-table td,
    .screen-admin-staff .responsive-card-table,
    .screen-admin-staff .responsive-card-table tbody,
    .screen-admin-staff .responsive-card-table tr,
    .screen-admin-staff .responsive-card-table td {
        display: block !important;
        width: 100% !important;
    }

    .responsive-card-table tbody tr {
        margin-bottom: 14px !important;
        padding: 7px 14px !important;
        border: 1px solid #dbe6e7 !important;
        border-radius: 18px !important;
        background: #fff !important;
        box-shadow: var(--modern-shadow-soft) !important;
    }

    .responsive-card-table td {
        display: grid !important;
        grid-template-columns: 120px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 12px !important;
        min-height: 46px !important;
        padding: 10px 2px !important;
        border-bottom: 1px solid #e7eeee !important;
        overflow-wrap: anywhere !important;
    }

    .responsive-card-table td:last-child {
        border-bottom: 0 !important;
    }

    .responsive-card-table td::before {
        content: attr(data-label) !important;
        color: #738487 !important;
        font-size: 12px !important;
        font-weight: 800 !important;
    }

    .responsive-card-table .empty-row {
        display: block !important;
        padding: 24px 4px !important;
        text-align: center !important;
        border: 0 !important;
    }

    .responsive-card-table .empty-row::before {
        display: none !important;
    }

    .responsive-card-table .action-cell,
    .responsive-card-table .reservation-action-cell {
        display: block !important;
    }

    .responsive-card-table .action-cell::before,
    .responsive-card-table .reservation-action-cell::before {
        display: block !important;
        margin-bottom: 8px !important;
    }

    .action-buttons,
    .reservation-action-buttons {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .action-buttons .button,
    .reservation-action-buttons .button,
    .action-buttons .inline-form,
    .reservation-action-buttons .inline-form {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* v4.2: small-tablet card cells must beat the screen-specific block rule above. */
@media (min-width: 768px) and (max-width: 860px) {
    .screen-table .responsive-card-table td,
    .screen-reservations-list .responsive-card-table td,
    .screen-players-list .responsive-card-table td,
    .screen-admin-staff .responsive-card-table td {
        display: grid !important;
        grid-template-columns: 120px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .screen-table .responsive-card-table .action-cell,
    .screen-reservations-list .responsive-card-table .reservation-action-cell,
    .screen-admin-staff .responsive-card-table .action-cell {
        display: block !important;
    }
}