/* =============================================================
   PitchShuffle — style.css
   Single source of truth for all shared styles.
   Change a value here and it updates across the whole app.
   ============================================================= */

/* ── 1. Design tokens ──────────────────────────────────────── */
:root {
    /* Brand colours */
    --ps-navy:       #1a2e4a;
    --ps-navy-dark:  #111e30;
    --ps-navy-hover: #243d5e;
    --ps-navy-muted: #8fa8c8;
    --ps-green:      #2e7d4f;
    --ps-green-light:#3a9e63;

    /* Page */
    --ps-bg:         #f0f0eb;
    --ps-card-bg:    #ffffff;
    --ps-text:       #1a1a1a;
    --ps-muted:      #6c757d;

    /* Strike / chase zone colours */
    --strike-bg:          #c8ecd4;
    --strike-border:      #2e7d4f;
    --strike-text:        #155724;
    --strike-hover:       #a8dbb8;
    --chase-bg:           #fef3cd;
    --chase-border:       #d4a017;
    --chase-text:         #856404;
    --chase-hover:        #f5d97a;
    --chase-hover-border: #b8860b;

    /* Game layout */
    --col-width:      110px;
    --btn-radius:     8px;
    --selected-ring:  3px solid var(--ps-navy);
    --game-font-size: 0.75rem; /* overridden per-user via boilerplate <style> block */
}
@media (min-width: 768px) {
    :root { --col-width: 130px; }
}

/* ── 2. Base ───────────────────────────────────────────────── */
body {
    background-color: var(--ps-bg);
    color: var(--ps-text);
    font-family: 'Segoe UI', sans-serif;
}

/* ── 3. Navbar ─────────────────────────────────────────────── */
.navbar {
    background-color: var(--ps-navy) !important;
    padding: 0.75rem 1.5rem;
}
.navbar-brand {
    color: var(--accent-text, #ffffff) !important;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 1px;
}
.nav-link {
    color: var(--accent-text, #ffffff) !important;
    opacity: 0.85;
    font-weight: 500;
    font-size: 1rem;
    transition: opacity 0.15s, background-color 0.15s;
}
.nav-link:hover {
    color: var(--accent-text, #ffffff) !important;
    opacity: 1;
}
.navbar .nav-link:hover {
    background-color: var(--ps-navy-hover);
    border-radius: 6px;
}

/* ── 4. Cards ──────────────────────────────────────────────── */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background-color: var(--ps-card-bg);
}
.card-header {
    background-color: var(--ps-navy);
    color: var(--accent-text, #ffffff);
    border-radius: 12px 12px 0 0 !important;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1rem 1.25rem;
}

/* Button used inside card headers — border/text always contrast against
   the accent background, no matter what colour the user picks */
.btn-outline-accent {
    color: var(--accent-text, #ffffff);
    border-color: var(--accent-text, #ffffff);
    background: transparent;
}
.btn-outline-accent:hover {
    background: var(--accent-text, #ffffff);
    color: var(--ps-navy);
    border-color: var(--accent-text, #ffffff);
}

/* ── 5. Buttons ────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--ps-navy);
    border-color: var(--ps-navy);
    font-weight: 600;
    padding: 0.5rem 1.25rem;
}
.btn-primary:hover {
    background-color: var(--ps-navy-dark);
    border-color: var(--ps-navy-dark);
}
.btn-success {
    background-color: var(--ps-green);
    border-color: var(--ps-green);
    font-weight: 600;
    padding: 0.5rem 1.25rem;
}
.btn-success:hover {
    background-color: var(--ps-green-light);
    border-color: var(--ps-green-light);
}

/* ── 6. Alerts & page chrome ───────────────────────────────── */
.alert { border-radius: 10px; font-weight: 500; }

.page-header {
    background-color: var(--ps-navy);
    color: var(--accent-text, #ffffff);
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.page-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    color: var(--accent-text, #ffffff);
}

main {
    padding: 1.5rem 0.75rem;
    max-width: 960px;
    margin: 0 auto;
}

/* ── 7. Home page ──────────────────────────────────────────── */
.home-hero {
    text-align: center;
    padding: 2.5rem 1rem 2rem;
}
.home-hero .app-icon {
    font-size: 3.5rem;
    color: var(--ps-navy);
    margin-bottom: 0.75rem;
}
.home-hero h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--ps-navy);
    margin-bottom: 0.25rem;
}
.home-hero p {
    color: var(--ps-muted);
    font-size: 1rem;
    margin-bottom: 2rem;
}

.btn-quick-game {
    background: var(--ps-navy);
    color: var(--accent-text, #fff);
    font-size: 1.2rem;
    font-weight: 700;
    padding: 1rem 2.5rem;
    border-radius: 14px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
    box-shadow: 0 4px 16px rgba(26, 46, 74, 0.28);
    width: 100%;
    justify-content: center;
}
.btn-quick-game:hover {
    background: var(--ps-navy-hover);
    color: var(--accent-text, #fff);
    transform: translateY(-1px);
    text-decoration: none;
}
.btn-quick-game i { font-size: 1.4rem; }

.quick-game-hint {
    font-size: 0.8rem;
    color: var(--ps-muted);
    margin-top: 0.5rem;
}

.or-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.75rem 0 1.5rem;
    color: #adb5bd;
    font-size: 0.85rem;
}
.or-divider::before,
.or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #dee2e6;
}

.btn-new-game {
    background: var(--ps-card-bg);
    color: var(--ps-text);
    font-size: 1rem;
    font-weight: 700;
    padding: 0.8rem 2rem;
    border-radius: 12px;
    border: 2px solid var(--ps-text);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    width: 100%;
    justify-content: center;
}
.btn-new-game:hover {
    background: var(--ps-navy);
    color: var(--accent-text, #fff);
    border-color: var(--ps-navy);
    text-decoration: none;
}

.quick-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.25rem;
}
.quick-link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.25rem 0.75rem;
    background: var(--ps-card-bg);
    border: 2px solid #dee2e6;
    border-radius: 12px;
    text-decoration: none;
    color: var(--ps-text);
    font-weight: 600;
    font-size: 0.85rem;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.quick-link-card:hover {
    background: var(--ps-navy);
    border-color: var(--ps-navy);
    color: var(--accent-text, #fff);
    box-shadow: 0 0 0 3px rgba(26, 46, 74, 0.1);
    text-decoration: none;
}
.quick-link-card:hover i {
    color: var(--accent-text, #fff);
}
.quick-link-card i {
    font-size: 1.6rem;
    color: var(--ps-navy);
}

/* ── 8. Game layout (shared by game.ejs & quick-game.ejs) ─── */
.game-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: var(--ps-navy);
    color: var(--accent-text, #fff);
    flex-shrink: 0;
}
.game-header .pitcher-info { flex: 1; }
.game-header .pitcher-name { font-size: 1.1rem; font-weight: 700; line-height: 1.2; color: var(--accent-text, #fff); }
.game-header .pitcher-meta { font-size: 0.75rem; color: rgba(255,255,255,0.65); }

body.game-body {
    background: #2a2a2a;
}

.pitch-col, .action-col {
    width: var(--col-width);
    flex-shrink: 0;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem 0.5rem;
}
.pitch-col  { border-right: 1px solid #dee2e6; overflow-y: auto; }
.action-col { border-left:  1px solid #dee2e6; }

.zone-col {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    overflow: hidden;
}
.zone-grid-wrapper { display: inline-block; position: relative; }
.zone-grid         { display: grid; gap: 0; border: 2px solid #adb5bd; }

/* ── 9. Pitch & action buttons (game views) ────────────────── */
.pitch-btn, .action-btn {
    padding: 0.55rem 0.4rem;
    border-radius: var(--btn-radius);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    border: 2px solid #dee2e6;
    background: #fff;
    color: #343a40;
    user-select: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.pitch-btn {
    background: #eef2f7;
    border-color: #c0cfe0;
    color: var(--ps-navy);
    border-left: 4px solid var(--ps-navy);
    text-align: left;
    padding-left: 0.6rem;
}
.pitch-btn:hover  { background: #dce6f0; border-left-color: var(--ps-navy); border-color: #8fa8c8; }
.pitch-btn.active { background: var(--ps-navy); border-color: var(--ps-navy); border-left-color: #4a9edd; color: var(--accent-text, #fff); }

.action-btn { border-color: transparent; }
.btn-random { background: #e8f4fd; border-color: #4a9edd; color: #1a5f8a; }
.btn-random:hover { background: #4a9edd; color: #fff; }
.btn-clear  { background: #fde8e8; border-color: #dd4a4a; color: #8a1a1a; }
.btn-clear:hover  { background: #dd4a4a; color: #fff; }
.btn-repeat { background: #f0e8fd; border-color: #9a4add; color: #5a1a8a; }
.btn-repeat:hover { background: #9a4add; color: #fff; }
.btn-call {
    background: var(--ps-navy);
    border-color: var(--ps-navy);
    color: var(--accent-text, #fff);
    margin-top: auto;
    padding: 0.75rem 0.4rem;
    font-size: 0.85rem;
}
.btn-call:hover { background: var(--ps-navy-hover); border-color: var(--ps-navy-hover); }
.btn-repeat.disabled-btn,
.btn-call.disabled-btn { opacity: 0.45; pointer-events: none; }

/* ── 10. Zone location boxes ───────────────────────────────── */
.loc-box {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Font size is controlled solely by the user preference variable.
       Do NOT add media-query font-size overrides here — they fight the preference. */
    font-size: var(--game-font-size, 0.75rem);
    line-height: 1.1;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 3px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.12);
    user-select: none;
    cursor: pointer;
    overflow: hidden;        /* prevents text from expanding the JS-sized cell */
    transition: background-color 0.15s;
}

.loc-box.strike   { background: var(--strike-bg);  border-color: var(--strike-border); color: var(--strike-text); }
.loc-box.chase    { background: var(--chase-bg);   border-color: var(--chase-border);  color: var(--chase-text);  }
.loc-box.disabled { background: #e9ecef; border-color: #ced4da; color: #adb5bd; text-decoration: line-through; }
.loc-box.empty    { background: transparent; border-color: transparent; cursor: default; pointer-events: none; }
.loc-box.covered  { pointer-events: none; visibility: hidden; }

.loc-box.strike:hover   { background: var(--strike-hover); }
.loc-box.chase:hover    { background: var(--chase-hover);  }
.loc-box.disabled:hover { background: #e9ecef; }
.loc-box.empty:hover, .loc-box.covered:hover { background: inherit; }
.loc-box.selected-loc   { outline: var(--selected-ring); outline-offset: -3px; }

/* ── 11. Chase overlay (spans multiple cells) ──────────────── */
.chase-overlay {
    position: absolute;
    z-index: 5;
    background: var(--chase-bg);
    border: 1px solid var(--chase-border);
    color: var(--chase-text);
    font-size: var(--game-font-size, 0.75rem);
    line-height: 1.1;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s, border-color 0.15s;
}
.chase-overlay:hover          { background: var(--chase-hover); border-color: var(--chase-hover-border); }
.chase-overlay.disabled       { background: #e9ecef; border-color: #ced4da; color: #adb5bd; text-decoration: line-through; }
.chase-overlay.disabled:hover { background: #e9ecef; border-color: #ced4da; }
.chase-overlay.selected-loc   { outline: var(--selected-ring); outline-offset: -3px; }

/* ── 12. Strike zone outline overlay ──────────────────────── */
.strike-zone-outline {
    position: absolute;
    pointer-events: none;
    border: 3px solid var(--ps-navy);
    z-index: 10;
}

/* ── 13. Call bar ──────────────────────────────────────────── */
.call-bar {
    padding: 0.75rem 1rem 2.5rem;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    text-align: center;
    flex-shrink: 0;
    min-height: 110px;
}
.call-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ps-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.call-pitch-name  { font-size: 1rem; font-weight: 700; color: var(--ps-navy); }
.call-location    { font-size: 0.85rem; color: var(--ps-muted); }

/* ── 14. Zone edit grid (pitchers/edit.ejs) ────────────────── */
.zone-grid-edit {
    display: grid;
    gap: 0;
    margin: 0 auto;
    border: 2px solid #adb5bd;
}
.loc-box-edit {
    width: 70px;
    height: 70px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.12);
    transition: background-color 0.15s, border-color 0.15s;
    user-select: none;
    cursor: pointer;
}
@media (min-width: 576px) { .loc-box-edit { width: 88px;  height: 88px;  font-size: 0.6rem; } }
@media (min-width: 992px) { .loc-box-edit { width: 108px; height: 108px; font-size: 0.7rem; } }

/* ── 15. Mini zone thumbnail (partials/_zone_mini.ejs) ─────── */
.mz-cell   { border-radius: 3px; }
.mz-strike { background-color: #2e9e5b; }
.mz-chase  { background-color: #d4a017; }

/* ── 16. Zone selection card (new + edit pitcher) ──────────── */
.zone-image-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border: 3px solid #dee2e6;
    border-radius: 12px;
    padding: 14px 12px 10px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
    background: #fff;
    width: 100%;
    gap: 10px;
    min-height: 140px;
}
.zone-image-card:hover {
    border-color: var(--ps-navy);
    box-shadow: 0 0 0 3px rgba(26, 46, 74, 0.12);
}
.btn-check:checked + .zone-image-card {
    border-color: var(--ps-navy);
    box-shadow: 0 0 0 3px rgba(26, 46, 74, 0.2);
    background-color: #eef1f5;
}
.zone-card-label {
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--ps-navy);
}
.zone-card-label small {
    display: block;
    font-weight: 400;
    color: var(--ps-muted);
    font-size: 0.75rem;
}

/* ── 17. Zone display card (pitcher show page) ─────────────── */
.zone-display-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    border: 3px solid var(--ps-navy);
    border-radius: 12px;
    padding: 10px 16px;
    background: #eef1f5;
    gap: 8px;
}
.zone-display-card .zone-card-label {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--ps-navy);
    text-align: center;
}

/* ── 18. Dark mode — form text & general readability ──────── */
[data-theme="dark"] .form-label,
[data-theme="dark"] .form-check-label,
[data-theme="dark"] .col-form-label {
    color: var(--ps-text);
}
[data-theme="dark"] .text-muted,
[data-theme="dark"] small.text-muted,
[data-theme="dark"] .form-text {
    color: var(--ps-muted) !important;
}
[data-theme="dark"] p,
[data-theme="dark"] span:not(.badge):not(.navbar-brand):not(.speaking-dot) {
    color: var(--ps-text);
}
[data-theme="dark"] hr {
    border-color: #2a3f5a;
    opacity: 1;
}
[data-theme="dark"] .card-body {
    color: var(--ps-text);
}
[data-theme="dark"] .alert {
    background-color: #1a2535;
    border-color: #2a3f5a;
    color: var(--ps-text);
}
[data-theme="dark"] .btn-outline-primary {
    color: var(--ps-navy-muted);
    border-color: #2a3f5a;
}
[data-theme="dark"] .btn-outline-primary:hover {
    background: var(--ps-navy);
    color: var(--accent-text);
    border-color: var(--ps-navy);
}
[data-theme="dark"] .zone-image-card {
    background: #1a2535;
    border-color: #2a3f5a;
}
[data-theme="dark"] .zone-card-label {
    color: var(--ps-text);
}
[data-theme="dark"] .zone-card-label small {
    color: var(--ps-muted);
}
[data-theme="dark"] .zone-display-card {
    background: #1a2535;
}
[data-theme="dark"] .select-card {
    background: #1a2535;
    border-color: #2a3f5a;
    color: var(--ps-text);
}
[data-theme="dark"] .select-card:hover {
    border-color: var(--ps-navy-muted);
    box-shadow: 0 0 0 3px rgba(143, 168, 200, 0.15);
}
[data-theme="dark"] .select-card.selected {
    background: #243350;
    border-color: var(--ps-navy-muted);
    box-shadow: 0 0 0 3px rgba(143, 168, 200, 0.2);
}
[data-theme="dark"] .select-card .fw-bold,
[data-theme="dark"] .select-card .fs-5 {
    color: var(--ps-text);
}
[data-theme="dark"] .select-card .text-muted {
    color: var(--ps-muted) !important;
}
[data-theme="dark"] .select-card .select-check,
[data-theme="dark"] .select-card .pitcher-select-check {
    color: #2a3f5a;
}
[data-theme="dark"] .select-card.selected .select-check,
[data-theme="dark"] .select-card.selected .pitcher-select-check {
    color: var(--ps-navy-muted);
}
[data-theme="dark"] .text-dark {
    color: var(--ps-text) !important;
}
[data-theme="dark"] .pitch-col,
[data-theme="dark"] .action-col {
    background: #1a2535;
    border-color: #2a3f5a;
}
[data-theme="dark"] .pitch-btn {
    background: #243350;
    border-color: #2a3f5a;
    color: var(--ps-navy-muted);
    border-left-color: var(--ps-navy-muted);
}
[data-theme="dark"] .pitch-btn:hover  { background: #2e4268; }
[data-theme="dark"] .pitch-btn.active { background: var(--ps-navy); color: var(--accent-text); }

/* ── 18. Dark mode — form text & general readability ──────── */
[data-theme="dark"] .form-label,
[data-theme="dark"] .form-check-label,
[data-theme="dark"] .col-form-label { color: var(--ps-text); }
[data-theme="dark"] .text-muted,
[data-theme="dark"] small.text-muted,
[data-theme="dark"] .form-text { color: var(--ps-muted) !important; }
[data-theme="dark"] p,
[data-theme="dark"] span:not(.badge):not(.navbar-brand):not(.speaking-dot):not(.card-header *) {
    color: var(--ps-text);
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-header span,
[data-theme="dark"] .card-header i {
    color: var(--accent-text, #ffffff) !important;
}
[data-theme="dark"] hr { border-color: #2a3f5a; opacity: 1; }
[data-theme="dark"] .card-body { color: var(--ps-text); }
[data-theme="dark"] .alert { background-color: #1a2535; border-color: #2a3f5a; color: var(--ps-text); }
[data-theme="dark"] .btn-outline-primary { color: var(--ps-navy-muted); border-color: #2a3f5a; }
[data-theme="dark"] .btn-outline-primary:hover { background: var(--ps-navy); color: var(--accent-text, #fff); border-color: var(--ps-navy); }
[data-theme="dark"] .zone-image-card { background: #1a2535; border-color: #2a3f5a; }
[data-theme="dark"] .zone-card-label { color: var(--ps-text); }
[data-theme="dark"] .zone-card-label small { color: var(--ps-muted); }
[data-theme="dark"] .zone-display-card { background: #1a2535; }
[data-theme="dark"] .select-card { background: #1a2535; border-color: #2a3f5a; color: var(--ps-text); }
[data-theme="dark"] .select-card:hover { border-color: var(--ps-navy-muted); box-shadow: 0 0 0 3px rgba(143, 168, 200, 0.15); }
[data-theme="dark"] .select-card.selected { background: #243350; border-color: var(--ps-navy-muted); }
[data-theme="dark"] .select-card .fw-bold,
[data-theme="dark"] .select-card .fs-5 { color: var(--ps-text); }
[data-theme="dark"] .select-card .text-muted { color: var(--ps-muted) !important; }
[data-theme="dark"] .select-card .select-check,
[data-theme="dark"] .select-card .pitcher-select-check { color: #2a3f5a; }
[data-theme="dark"] .select-card.selected .select-check,
[data-theme="dark"] .select-card.selected .pitcher-select-check { color: var(--ps-navy-muted); }
[data-theme="dark"] .text-dark { color: var(--ps-text) !important; }
[data-theme="dark"] .pitch-col,
[data-theme="dark"] .action-col { background: #1a2535; border-color: #2a3f5a; }
[data-theme="dark"] .pitch-btn { background: #243350; border-color: #2a3f5a; color: var(--ps-navy-muted); border-left-color: var(--ps-navy-muted); }
[data-theme="dark"] .pitch-btn:hover { background: #2e4268; }
[data-theme="dark"] .pitch-btn.active { background: var(--ps-navy); color: var(--accent-text, #fff); }

/* ─────────────────────────────────────────────────────────────
   ADD TO style.css — Team colour customisation
   (paste these rules after the existing :root block, or at the
   end of the file — they only target team/pitcher card elements)
   ─────────────────────────────────────────────────────────────

   --team-color is injected per-user via boilerplate.ejs.
   It falls back to the brand navy so the default looks identical
   to before for users who haven't customised.
   ───────────────────────────────────────────────────────────── */

/* ── Team card icon circles (teams/index.ejs) ────────────── */
.team-icon {
    background: var(--team-color, #1a2e4a);
    color: var(--team-color-text, #ffffff);
}

/* Team card name text */
.team-name {
    color: var(--team-color, #1a2e4a);
}

/* Team card hover border */
.team-card:hover {
    border-color: var(--team-color-muted, #8fa8c8);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-color, #1a2e4a) 10%, transparent);
}

/* ── Pitcher number badge circles (teams/show.ejs, game select) ── */
.pitcher-number,
.pitcher-badge,
.pitcher-number-badge,
.pitcher-select-badge {
    background: var(--team-color, #1a2e4a);
    color: var(--team-color-text, #ffffff);
}

/* Pitcher name text */
.pitcher-name {
    color: var(--team-color, #1a2e4a);
}

/* Pitcher card hover border */
.pitcher-card:hover {
    border-color: var(--team-color-muted, #8fa8c8);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-color, #1a2e4a) 8%, transparent);
}

/* ── Select-card icon circles (game/select-team.ejs, game/select-pitcher.ejs) ── */
.select-card-icon,
.pitcher-badge {
    background: var(--team-color, #1a2e4a);
    color: var(--team-color-text, #ffffff);
}

/* Select-card hover/selected state */
.select-card:hover {
    border-color: var(--team-color, #1a2e4a);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-color, #1a2e4a) 10%, transparent);
}
.select-card.selected {
    border-color: var(--team-color, #1a2e4a);
    background: color-mix(in srgb, var(--team-color, #1a2e4a) 8%, white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-color, #1a2e4a) 12%, transparent);
}
.select-card.selected .select-check,
.select-card.selected .pitcher-select-check {
    color: var(--team-color, #1a2e4a);
}

/* ── Dark mode overrides for team-color elements ──────────── */
[data-theme="dark"] .team-name,
[data-theme="dark"] .pitcher-name {
    color: var(--team-color-muted, #8fa8c8);
}
[data-theme="dark"] .select-card.selected {
    background: color-mix(in srgb, var(--team-color, #1a2e4a) 20%, #1a2535);
    border-color: var(--team-color-muted, #8fa8c8);
}
[data-theme="dark"] .select-card.selected .select-check,
[data-theme="dark"] .select-card.selected .pitcher-select-check {
    color: var(--team-color-muted, #8fa8c8);
}

/* ─────────────────────────────────────────────────────────────
   ADD TO style.css — Secondary color for pitcher badge circles
   Paste these rules after the existing :root block (or at end).
   ───────────────────────────────────────────────────────────── */

/* Pitcher number badge circles use the team secondary color */
.pitcher-number,
.pitcher-badge,
.pitcher-number-badge,
.pitcher-select-badge {
    background: var(--ps-secondary, #4a7fa5);
    color: var(--ps-secondary-text, #ffffff);
}

/* Team icon circle on teams/index also uses secondary */
.team-icon {
    background: var(--ps-secondary, #4a7fa5);
    color: var(--ps-secondary-text, #ffffff);
}
/* =============================================================
   DARK MODE POLISH — append to end of style.css
   ============================================================= */

/* ── Base body & headings ──────────────────────────────────── */
[data-theme="dark"] body {
    background-color: var(--ps-bg);
    color: var(--ps-text);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--ps-text);
}

/* ── Home page ─────────────────────────────────────────────── */
[data-theme="dark"] .home-hero .app-icon {
    color: var(--ps-navy-muted);
}
[data-theme="dark"] .home-hero h1 {
    color: var(--ps-text);
}
[data-theme="dark"] .or-divider {
    color: var(--ps-muted);
}
[data-theme="dark"] .or-divider::before,
[data-theme="dark"] .or-divider::after {
    background: #2a3f5a;
}
[data-theme="dark"] .quick-link-card {
    border-color: #2a3f5a;
    background: var(--ps-card-bg);
    color: var(--ps-text);
}
[data-theme="dark"] .quick-link-card i {
    color: var(--ps-navy-muted);
}
[data-theme="dark"] .quick-link-card:hover {
    background: var(--ps-navy);
    border-color: var(--ps-navy);
    color: var(--accent-text, #fff);
}
[data-theme="dark"] .quick-link-card:hover i {
    color: var(--accent-text, #fff);
}
[data-theme="dark"] .btn-new-game {
    background: var(--ps-card-bg);
    color: var(--ps-text);
    border-color: #2a3f5a;
}
[data-theme="dark"] .btn-new-game:hover {
    background: var(--ps-navy);
    color: var(--accent-text, #fff);
    border-color: var(--ps-navy);
}

/* ── Game screen (game.ejs & quick-game.ejs) ───────────────── */
[data-theme="dark"] .pitch-row,
[data-theme="dark"] .action-row {
    background: #1a2535;
    border-color: #2a3f5a;
}
[data-theme="dark"] .zone-area {
    background: var(--ps-bg);
}
[data-theme="dark"] .zone-grid {
    border-color: #4a6080;
}
[data-theme="dark"] .game-page {
    background: var(--ps-bg);
}
[data-theme="dark"] .setup-banner {
    background: #1e2d1a;
    border-color: #2d4a28;
    color: #a8c8a0;
}
[data-theme="dark"] .setup-banner a {
    color: #7ec87a;
}

/* ── Buttons ───────────────────────────────────────────────── */
[data-theme="dark"] .btn-outline-secondary {
    color: var(--ps-muted);
    border-color: #2a3f5a;
}
[data-theme="dark"] .btn-outline-secondary:hover {
    background: #2a3f5a;
    color: var(--ps-text);
    border-color: #2a3f5a;
}
[data-theme="dark"] .btn-outline-danger {
    color: #e87a7a;
    border-color: #7a3030;
}
[data-theme="dark"] .btn-outline-danger:hover {
    background: #7a3030;
    color: #fff;
    border-color: #7a3030;
}
[data-theme="dark"] .btn-outline-warning {
    color: #e8c87a;
    border-color: #7a6030;
}
[data-theme="dark"] .btn-outline-light {
    color: var(--ps-muted);
    border-color: #2a3f5a;
}
[data-theme="dark"] .btn-outline-light:hover {
    background: #2a3f5a;
    color: var(--ps-text);
}
[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* ── Forms ─────────────────────────────────────────────────── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #1a2535;
    border-color: #2a3f5a;
    color: var(--ps-text);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: #1a2535;
    border-color: var(--ps-navy-muted);
    color: var(--ps-text);
    box-shadow: 0 0 0 0.2rem rgba(143, 168, 200, 0.15);
}
[data-theme="dark"] .form-control::placeholder {
    color: var(--ps-muted);
    opacity: 0.7;
}
[data-theme="dark"] .input-group-text {
    background-color: #243350;
    border-color: #2a3f5a;
    color: var(--ps-muted);
}

/* ── Tables ────────────────────────────────────────────────── */
[data-theme="dark"] .table {
    color: var(--ps-text);
    border-color: #2a3f5a;
}
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    border-color: #2a3f5a;
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--ps-text);
}

/* ── Badges ────────────────────────────────────────────────── */
[data-theme="dark"] .badge.bg-light {
    background-color: #243350 !important;
    color: var(--ps-text) !important;
}

/* ── Modal ─────────────────────────────────────────────────── */
[data-theme="dark"] .modal-content {
    background-color: #1a2535;
    color: var(--ps-text);
    border-color: #2a3f5a;
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: #2a3f5a;
}
[data-theme="dark"] .modal-title {
    color: var(--ps-text);
}

/* ── Profile page ──────────────────────────────────────────── */
[data-theme="dark"] .form-check-input {
    background-color: #1a2535;
    border-color: #2a3f5a;
}
[data-theme="dark"] .form-check-input:checked {
    background-color: var(--ps-navy-muted);
    border-color: var(--ps-navy-muted);
}

/* ── Teams & pitchers ──────────────────────────────────────── */
[data-theme="dark"] .pitcher-card,
[data-theme="dark"] .team-card {
    background: var(--ps-card-bg);
    border-color: #2a3f5a;
}
[data-theme="dark"] .pitcher-card:hover,
[data-theme="dark"] .team-card:hover {
    border-color: var(--ps-navy-muted);
}

/* ── Loc boxes (game zone) ─────────────────────────────────── */
[data-theme="dark"] .loc-box.strike {
    background: var(--strike-bg);
    border-color: var(--strike-border);
    color: var(--strike-text);
    filter: brightness(0.55) saturate(0.85);
}
[data-theme="dark"] .loc-box.chase {
    background: var(--chase-bg);
    border-color: var(--chase-border);
    color: var(--chase-text);
    filter: brightness(0.55) saturate(0.85);
}
[data-theme="dark"] .chase-overlay {
    background: var(--chase-bg);
    border-color: var(--chase-border);
    color: var(--chase-text);
    filter: brightness(0.55) saturate(0.85);
}

/* ── Call bar (already dark navy — just ensure text is right) ── */
[data-theme="dark"] .call-bar {
    background: #0f1923;
    border-top: 1px solid #2a3f5a;
}