@keyframes fieldFill {
    0%   { background-color: rgba(255, 181, 71, 0.55); box-shadow: 0 0 0 2px var(--accent); }
    70%  { background-color: rgba(255, 181, 71, 0.15); box-shadow: 0 0 0 2px rgba(255,181,71,0.25); }
    100% { background-color: transparent; box-shadow: none; }
}
.field-filling {
    animation: fieldFill 0.7s ease-out forwards;
    border-radius: 4px;
}

:root{
    --bg: #f0f4ff;
    --surface: #ffffff;
    --muted: #6b7280;
    --primary: #2b48d9;
    --primary-dark: #1a30b0;
    --secondary: #6dd3b2;
    --accent: #ffb547;
    --danger: #ef4444;
    --win: #16a34a;
    --loss: #dc2626;
    --pending: #f59e0b;
    --surface-2: #f8fafc;
    --glass: rgba(255,255,255,0.6);
    --shadow: 0 4px 16px rgba(35,40,55,0.08);
    --header-height: 58px;
    /* Text colours — referenced throughout so dark mode can override */
    --text-primary: #1f2937;
    --text-heading: #0f172a;
    --text-secondary: #374151;
    --border: rgba(15,23,42,0.06);
    --border-strong: rgba(15,23,42,0.12);
    --row-odd: rgba(15,23,42,0.055);
    --row-even: #ffffff;
    --row-hover: rgba(70,96,255,0.07);
    --input-bg: linear-gradient(180deg,#fff,#fbfdff);
    --tfoot-bg: #f8f9fa;
}

[data-theme="dark"] {
    --bg: #0f1117;
    --surface: #1a1d27;
    --surface-2: #22263a;
    --glass: rgba(26,29,39,0.7);
    --shadow: 0 4px 16px rgba(0,0,0,0.35);
    --muted: #9ca3af;
    --text-primary: #e2e8f0;
    --text-heading: #f1f5f9;
    --text-secondary: #cbd5e1;
    --border: rgba(255,255,255,0.07);
    --border-strong: rgba(255,255,255,0.12);
    --row-odd: rgba(255,255,255,0.04);
    --row-even: transparent;
    --row-hover: rgba(70,96,255,0.12);
    --input-bg: linear-gradient(180deg,#22263a,#1e2133);
    --tfoot-bg: #22263a;
    --primary: #4f6ef7;
    --primary-dark: #3a57e8;
}

body {
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: var(--bg);
    color: var(--text-primary);
    margin: 0;
    padding: 20px 22px 32px;
    padding-top: calc(var(--header-height) + 20px);
    -webkit-font-smoothing:antialiased;
}

/* ==============================
   Sticky App Header
   ============================== */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(135deg, #1e35b8 0%, var(--primary) 60%, #3d5cf5 100%);
    color: #fff;
    padding: 0 22px;
    box-shadow: 0 2px 14px rgba(15,23,42,0.2);
}

.app-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.app-logo {
    font-size: 1.4rem;
}

.app-version {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.75;
    background: rgba(255,255,255,0.18);
    padding: 2px 7px;
    border-radius: 20px;
    align-self: center;
    letter-spacing: 0.02em;
}

.app-header-auth {
    position: fixed;
    top: 0;
    right: 22px;
    height: var(--header-height);
    z-index: 201;
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-inputs {
    display: flex;
    gap: 8px;
}

.auth-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.app-header-auth input {
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.15);
    color: #fff;
    width: 140px;
    box-shadow: none;
}

.app-header-auth input::placeholder { color: rgba(255,255,255,0.55); }
.app-header-auth input:focus {
    outline: 2px solid rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.22);
}

.app-header-auth button {
    padding: 6px 13px;
    font-size: 13px;
    border-radius: 6px;
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.28);
    box-shadow: none;
    transition: background .12s ease;
}

.app-header-auth button:hover:not(:disabled) {
    background: rgba(255,255,255,0.30);
}

#authStatus {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    min-width: 100px;
    white-space: nowrap;
}

/* ==============================
   Mobile-only header auth bar
   ============================== */
/* Hide the desktop dark-mode button when authPanel becomes the mobile bottom sheet */
.app-header-auth.mobile-open .desktop-dark-mode-btn {
    display: none;
}


.mobile-header-auth {
    display: none;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.mobile-auth-status {
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-auth-toggle {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.30);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: none;
    flex-shrink: 0;
    cursor: pointer;
    transition: background .12s ease;
}
.mobile-auth-toggle:hover { background: rgba(255,255,255,0.30); }

.mobile-auth-toggle.is-signed-in::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #2b48d9; /* matches header color */
}


/* ==============================
   Auth bottom sheet
   ============================== */
/* Sheet top row (heading + close) — hidden until sheet opens */
.auth-sheet-top-row { display: none; }

/* Backdrop */
/* ── Sign-in Gate Overlay ──────────────────────────────────────────── */
#signinGate {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
}
#signinGate.hidden { display: none; }
.signin-gate-card {
    background: var(--surface);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 36px 32px;
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.signin-gate-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-heading);
    text-align: center;
    margin-bottom: 2px;
}
.signin-gate-subtitle {
    font-size: 0.9rem;
    color: var(--muted);
    text-align: center;
    margin: -6px 0 2px;
}
.signin-gate-card input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
    background: var(--surface-2);
    color: var(--text-primary);
    box-sizing: border-box;
}
.signin-gate-card input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(43,72,217,0.15);
}
.signin-gate-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#gateSignInBtn, #gateSignUpBtn {
    width: 100%;
    padding: 11px;
    font-size: 1rem;
    font-weight: 600;
}
.signin-gate-status {
    font-size: 0.87rem;
    text-align: center;
    color: var(--danger);
    min-height: 1.2em;
}

.auth-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 298;
    background: rgba(0,0,0,0.45);
}
.auth-backdrop.active { display: block; }

/* Slide-up animation */
@keyframes sheetSlideUp {
    from { transform: translateY(100%); opacity: 0.7; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Sheet open state — overrides the header's inline auth panel */
.app-header-auth.mobile-open {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: auto;       
    height: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 299;
    background: var(--surface);
    border-radius: 18px 18px 0 0;
    padding: 0 20px 36px;
    box-shadow: 0 -6px 32px rgba(0,0,0,0.18);
    gap: 0;
    color: var(--text-primary);
    animation: sheetSlideUp 0.22s ease-out;
}

.app-header-auth.mobile-open .auth-sheet-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 12px;
    border-bottom: 1px solid rgba(15,23,42,0.08);
    margin-bottom: 16px;
}
.auth-sheet-heading {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-heading);
}
.auth-sheet-close {
    width: 32px;
    height: 32px;
    min-height: unset;
    border-radius: 50%;
    background: rgba(15,23,42,0.07);
    border: none;
    color: var(--text-secondary);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: none;
    cursor: pointer;
}
.auth-sheet-close:hover { background: rgba(15,23,42,0.12); }

.app-header-auth.mobile-open .auth-inputs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.app-header-auth.mobile-open .auth-inputs input {
    background: var(--surface-2);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    padding: 12px 14px;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
}
.app-header-auth.mobile-open .auth-inputs input::placeholder { color: var(--muted); }
.app-header-auth.mobile-open .auth-inputs input:focus {
    outline: 2px solid var(--primary);
    background: var(--surface);
}

.app-header-auth.mobile-open .auth-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.app-header-auth.mobile-open .auth-actions button {
    width: 100%;
    min-height: 44px;
    font-size: 15px;
    padding: 12px 16px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(43,72,217,0.18);
}
.app-header-auth.mobile-open #authSignUpBtn {
    background: var(--surface);
    color: var(--primary);
    border: 1px solid rgba(43,72,217,0.2);
    box-shadow: none;
}
.app-header-auth.mobile-open #authSignOutBtn {
    background: var(--danger);
    border: none;
}
.app-header-auth.mobile-open #authStatus {
    font-size: 14px;
    color: var(--muted);
    text-align: center;
    white-space: normal;
    min-width: unset;
    padding: 4px 0 6px;
}

/* When signed in: hide the credentials form, show only sign-out */
.app-header-auth.is-signed-in .auth-inputs { display: none !important; }
.app-header-auth.is-signed-in #authSignInBtn,
.app-header-auth.is-signed-in #authSignUpBtn,
.app-header-auth.is-signed-in #authForgotBtn { display: none !important; }

/* Allow change-password inputs to remain visible during PASSWORD_RECOVERY session */
.app-header-auth.is-signed-in #authViewChangePass .auth-inputs { display: flex !important; }

/* Cancel button in forgot panel: secondary style in mobile sheet */
.app-header-auth.mobile-open #cancelForgotBtn {
    background: var(--surface);
    color: var(--primary);
    border: 1px solid rgba(43,72,217,0.2);
    box-shadow: none;
}

/* Forgot? link: keep text-link appearance in mobile sheet */
.app-header-auth.mobile-open #authForgotBtn {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--primary);
    text-decoration: underline;
    font-size: 13px;
    min-height: unset;
    padding: 4px 0;
    width: auto;
}

/* Prevent body scroll when sheet is open */
body.auth-sheet-open { overflow: hidden; }

@media (max-width: 700px) {
    body { padding-top: calc(var(--header-height) + 12px); }
    .app-header { height: var(--header-height); padding: 0 16px; }
    .app-header-auth { display: none; }
    .mobile-header-auth { display: flex; }
}
button {
    padding: 9px 14px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(43,72,217,0.25);
    transition: transform .08s ease, box-shadow .12s ease, opacity .12s ease, background .12s ease;
}

button:hover:not(:disabled) {
    background: var(--primary-dark);
    box-shadow: 0 4px 10px rgba(43,72,217,0.30);
}

button.secondary {
    background: var(--surface);
    color: var(--primary);
    border: 1px solid rgba(43,72,217,0.18);
    box-shadow: none;
}

button.secondary:hover:not(:disabled) {
    background: rgba(43,72,217,0.05);
    border-color: rgba(43,72,217,0.30);
}

button:active { transform: translateY(1px); }
button:disabled { opacity: 0.6; cursor: not-allowed; transform:none; }

/* Two-column layout for bankrolls and strategy builder */
.top-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.top-row .left {
    flex: 0 0 auto;
    min-width: 300px;
}

/* strategyOutput is a direct top-row flex child — display:none collapses its space */
#strategyOutput {
    flex: 0 0 220px;
    width: 220px;
    flex-shrink: 0;
}

.top-row .right {
    flex: 0 0 auto;
    min-width: 220px;
    max-width: 480px;
    flex-shrink: 0;
}

.top-row .summary {
    display: none; /* unused — strategyOutput is now a direct flex child */
}

.top-row .center {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* Results Summary content sizing */
#resultsSummaryContent { font-size: 13px; }
#resultsSummaryContent table { font-size: 13px; }
#resultsSummaryContent table td,
#resultsSummaryContent table th { padding: 5px 8px; }
#resultsSummaryContent .market-breakdown-table { font-size: 12px; }
#resultsSummaryContent .market-breakdown-table td,
#resultsSummaryContent .market-breakdown-table th { padding: 4px 6px; }

#toggleMarketRowsBtn {
    font-size: 14px;
    font-family: inherit;
    padding: 9px 14px;
    vertical-align: middle;
}
#resultsSummary { width: 100%; }

/* Section header inside a card (e.g. form title, accounts title) */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(15,23,42,0.06);
}

.card-header h2, .card-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-heading);
}

.card {
    background: var(--surface);
    border-radius: 12px;
    padding: 14px 16px;
    width: 100%;
    box-shadow: var(--shadow);
    border: 1px solid rgba(15,23,42,0.05);
    box-sizing: border-box;
}

/* Stack columns on smaller screens */
@media (max-width: 900px) {
    .top-row {
        flex-direction: column;
    }
    .top-row .right { max-width: none; }
}
#output {
    margin-top: 20px;
    padding: 10px;
    background: var(--surface);
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Section heading used in history and cards */
.section-heading {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: -0.01em;
}

/* History section card wrapping the table + controls */
.history-section {
    background: var(--surface);
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow);
    margin-top: 8px;
    border: 1px solid rgba(15,23,42,0.05);
}

.history-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(15,23,42,0.06);
}

/* History control bar */
#historyControls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--surface-2);
    border-radius: 8px;
    border: 1px solid rgba(15,23,42,0.05);
}

#historyControls label {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
}

#historyPersistentControls {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

/* Top + Bottom pagination share the same appearance */
#paginationControlsTop,
#paginationControls {
    margin-bottom: 10px;
    margin-top: 0;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 10px;
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid rgba(15,23,42,0.05);
    border-radius: 8px;
}

/* Bankrolls table */
.bankrolls-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
    font-size: 14px;
}

.bankrolls-table th,
.bankrolls-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.bankrolls-table thead th {
    background: linear-gradient(180deg, rgba(70,96,255,0.06), rgba(109,211,178,0.03));
    font-weight: 600;
    color: var(--text-heading);
    font-size: 13px;
}

.bankrolls-table tbody tr:last-child td {
    border-bottom: none;
}

.bankrolls-table tbody tr:hover td {
    background: rgba(70,96,255,0.03);
}

/* Scrollable history table wrapper */
.table-scroll-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 62vh;
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(15,23,42,0.07);
}

/* Sticky table header within scroll wrapper */
#betsHistoryTable thead tr:first-child th {
    position: sticky;
    top: 0;
    z-index: 3;
}

.top-row .left, .top-row .right {
    background: var(--surface);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(15,23,42,0.05);
    box-sizing: border-box;
}

h2, h3 {
    color: var(--text-heading);
    margin-top: 0;
}

/* Strategy form — label and input stacked cleanly */
#strategyForm label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

#strategyForm label input,
#strategyForm label select {
    font-weight: 400;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

/* Inline-block for free bet checkbox (keep text + checkbox on one line) */
#strategyForm label:has(input[type="checkbox"]) {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* Wager + Free Bet grouped on one header row */
.wager-freebet-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.wager-freebet-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
#strategyForm .wager-freebet-header label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.wager-freebet-group > input {
    font-weight: 400;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

/* Implied probability — keep label text, number, and % on one line */
#strategyForm label:has(#percentage) {
    flex-direction: row;
    align-items: center;
    gap: 0;
}

/* Kelly row stays flex-row */
#strategyForm label:has(#kelly) {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#strategyForm label:has(#kelly) input { width: 90px; }

/* Layout for strategy form + summary placed side-by-side */
.strategy-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.strategy-row form {
    flex: 1 1 auto;
}

@media (max-width: 900px) {
    .strategy-row {
        flex-direction: column;
    }
    #strategyOutput { width: 100%; }
}

.muted { color: var(--muted); }

/* Form inputs */
input[type="text"], input[type="number"], input[type="date"], select, textarea {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    color: var(--text-primary);
    color-scheme: light;
}

[data-theme="dark"] input[type="date"],
[data-theme="dark"] select {
    color-scheme: dark;
}

[data-theme="dark"] select option {
    background-color: #22263a;
    color: #e2e8f0;
}

/* Bankroll history modal change colours */
.history-pos { color: #22c55e; font-weight: 600; }
.history-neg { color: #ef4444; font-weight: 600; }

/* Make subtle primary outline for focused controls */
input:focus, select:focus, textarea:focus, button:focus {
    outline: 3px solid rgba(43,72,217,0.12);
    outline-offset: 2px;
}

/* Responsive table layout with horizontal scroll wrapper */
#betsHistoryTable {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

/* Bets history table - use automatic layout so the browser decides column widths */
#betsHistoryTable {
    table-layout: auto;
    width: 100%;
}

#betsHistoryTable thead tr {
    display: table-row;
    width: 100%;
}

#betsHistoryTable tbody tr {
    display: table-row;
    width: 100%;
}

#betsHistoryTable th,
#betsHistoryTable td {
    padding: 8px;
    text-align: left;
    word-wrap: break-word;
    font-size: 15px;
    border: 1px solid var(--border);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#betsHistoryTable thead th {
    background: linear-gradient(180deg, rgba(70,96,255,0.06), rgba(109,211,178,0.03));
    color: var(--text-heading);
    font-weight: 600;
    border-bottom: 2px solid var(--border);
}

#betsHistoryTable tbody tr:nth-child(odd) td {
    background: var(--row-odd);
}

#betsHistoryTable tbody tr:nth-child(even) td {
    background: var(--row-even);
}

#betsHistoryTable tbody tr:hover td {
    background: var(--row-hover);
}

/* App footer */
.app-footer {
  text-align: center;
  padding: 18px 16px 24px;
  margin-top: 24px;
}

.feedback-link {
  display: inline-block;
  font-size: 13px;
  color: var(--text-muted, #888);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 20px;
  transition: color 0.2s, border-color 0.2s;
}

.feedback-link:hover {
  color: var(--accent, #4f8ef7);
  border-color: var(--accent, #4f8ef7);
}

/* Totals footer styling */
#betsHistoryTable tfoot tr {
    background-color: var(--tfoot-bg);
    border-top: 2px solid var(--border-strong);
}

#betsHistoryTable tfoot td {
    font-weight: 600;
    color: var(--text-heading);
    padding: 10px 8px;
}

.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}
.badge.win { background: var(--win); }
.badge.loss { background: var(--loss); }
.badge.pending { background: var(--pending); color: #1f2937; }
.badge.void { background: #94a3b8; }
.badge.push { background: #3b82f6; }

#betsHistoryTable td:has(.book-filter-container) {
    overflow: visible;
    position: relative;
}

/* Edit mode: make inputs and selects smaller and more compact */
#betsHistoryTable tr.edit-mode td {
    padding: 4px 2px;
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* Last cell (buttons) in edit mode should span and display buttons in a row */
#betsHistoryTable tr.edit-mode td:last-child {
    grid-column: 1 / -1;
    padding: 6px 2px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

#betsHistoryTable tr.edit-mode input,
#betsHistoryTable tr.edit-mode select {
    width: 100%;
    font-size: 14px;
    padding: 4px 2px;
    margin: 0;
    box-sizing: border-box;
}

#betsHistoryTable tr.edit-mode button {
    padding: 4px 6px;
    font-size: 13px;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Filter row styling */
#betsHistoryTable .filter-row {
    background-color: var(--surface-2);
}

#betsHistoryTable .filter-row td {
    padding: 4px 2px;
    overflow: visible;
    position: relative;
}

.date-filter-container {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}

.date-filter-select,
.date-filter-input {
    padding: 6px 4px;
    font-size: 13px;
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    box-sizing: border-box;
    background: var(--input-bg);
    color: var(--text-primary);
}

.date-filter-select {
    min-width: 100px;
}

.date-filter-input {
    flex: 1;
    min-width: 120px;
}

.date-range-separator {
    font-size: 13px;
    color: var(--muted);
    font-weight: bold;
}

/* Numerical filter styling */
.numeric-filter-container {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}

.numeric-filter-select {
    min-width: 85px;
    padding: 6px 4px;
    font-size: 13px;
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    box-sizing: border-box;
}

.numeric-filter-input {
    flex: 1;
    min-width: 70px;
    padding: 6px 4px;
    font-size: 13px;
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    box-sizing: border-box;
}

.numeric-separator {
    font-size: 13px;
    color: var(--muted);
    font-weight: bold;
}

/* Boolean filter styling */
.boolean-filter-select {
    width: 100%;
    padding: 6px 4px;
    font-size: 13px;
    border: 1px solid #999;
    border-radius: 3px;
    box-sizing: border-box;
}

/* Multi-select filter styling */
.multi-select-filter {
    width: 100%;
    padding: 6px 4px;
    font-size: 13px;
    border: 1px solid #999;
    border-radius: 3px;
    box-sizing: border-box;
    min-height: 32px;
}

.multi-select-filter option {
    padding: 4px 8px;
}

.multi-select-filter option:checked {
    background-color: #4CAF50;
    color: white;
}

/* Book filter custom dropdown styling */
.book-filter-container {
    position: relative;
    display: block;
    width: 100%;
}

.book-filter-toggle {
    width: 100%;
    padding: 6px 4px;
    font-size: 13px;
    border: 1px solid #999;
    border-radius: 3px;
    background-color: transparent;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
}

.book-filter-toggle:hover {
    background-color: var(--surface-2);
}

.book-filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--surface);
    border: 1px solid var(--border-strong);
    border-top: none;
    border-radius: 0 0 3px 3px;
    padding: 8px;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.book-filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    cursor: pointer;
    font-size: 13px;
    user-select: none;
}

.book-filter-checkbox {
    cursor: pointer;
}

.book-filter-checkbox-label:hover {
    background-color: var(--surface-2);
    padding-left: 4px;
    padding-right: 4px;
    margin-left: -4px;
    margin-right: -4px;
    border-radius: 2px;
}

/* Result filter custom dropdown styling */
.result-filter-container {
    position: relative;
    display: block;
    width: 100%;
}

.result-filter-toggle {
    width: 100%;
    padding: 6px 4px;
    font-size: 13px;
    border: 1px solid #999;
    border-radius: 3px;
    background-color: transparent;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
}

/* Make the select/toggle labels high-contrast black */
.book-filter-toggle,
.result-filter-toggle {
    color: var(--text-primary);
    font-weight: 600;
}

.result-filter-toggle:hover {
    background-color: var(--surface-2);
}

.result-filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--surface);
    border: 1px solid var(--border-strong);
    border-top: none;
    border-radius: 0 0 3px 3px;
    padding: 8px;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.result-filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    cursor: pointer;
    font-size: 13px;
    user-select: none;
}

.result-filter-checkbox {
    cursor: pointer;
}

.result-filter-checkbox-label:hover {
    background-color: var(--surface-2);
    padding-left: 4px;
    padding-right: 4px;
    margin-left: -4px;
    margin-right: -4px;
    border-radius: 2px;
}

.filter-input {
    width: 100%;
    padding: 6px 4px;
    font-size: 13px;
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    box-sizing: border-box;
}

.filter-input::placeholder {
    color: var(--muted);
    font-style: italic;
}

#toggleFiltersBtn {
    background-color: var(--surface);
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: 8px;
    color: var(--primary);
    font-weight: 600;
    padding: 8px 10px;
    box-shadow: none;
    transition: background-color .12s ease, transform .06s ease;
}

#toggleFiltersBtn:hover:not(:disabled) {
    background-color: rgba(43,72,217,0.06);
}

#toggleFiltersBtn:active {
    transform: translateY(1px);
}

/* Pagination Controls */
#paginationControls {
    margin-top: 12px;
    margin-bottom: 0;
}

#paginationControlsTop button,
#paginationControls button {
    padding: 6px 12px;
    font-size: 14px;
    background: var(--surface);
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--primary);
    box-shadow: none;
}

#paginationControlsTop button:hover:not(:disabled),
#paginationControls button:hover:not(:disabled) {
    background-color: var(--surface-2);
    border-color: var(--border-strong);
}

#paginationControlsTop button:disabled,
#paginationControls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--surface-2);
}

#pageIndicator {
    font-weight: bold;
    padding: 6px 12px;
    min-width: 120px;
    text-align: center;
}

#itemsPerPageSelect {
    padding: 6px 12px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-primary);
    cursor: pointer;
}

/* By Market breakdown table — alternating rows */
.market-breakdown-table tbody tr.market-row:nth-child(odd) td {
    background: var(--row-odd);
}

.market-breakdown-table tbody tr.market-row:nth-child(even) td {
    background: var(--row-even);
}

.market-breakdown-table tbody tr.market-row:hover td {
    background: var(--row-hover);
}

/* Responsive tweaks */
@media (max-width: 900px) {
    #betsHistoryTable th, #betsHistoryTable td { font-size: 13px; }
    .top-row .left, .top-row .right { padding: 10px; }
}

/* Top-row responsive sizing for larger screens */
@media (min-width: 901px) {
    .top-row .left { flex: 0 0 360px; }
    .top-row .right { flex: 0 0 auto; max-width: 480px; }
    .top-row .summary { flex: 1 1 auto; }
    .top-row .center { flex: 3 1 0; display:flex; justify-content:center; }
    .strategy-row { gap: 12px; }
    #strategyOutput { width: 200px; }
}

/* Medium screens */
@media (max-width: 900px) and (min-width: 601px) {
    .top-row { gap: 14px; }
    .top-row .center, .top-row .right, .top-row .summary { min-width: 200px; }
    #strategyOutput { width: 180px; }
}

/* ==============================
   Mobile Filter Button + Badge
   ============================== */
.history-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-filter-btn {
    display: none; /* shown via media query */
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 12px;
    position: relative;
}
.mobile-filter-btn svg { flex-shrink: 0; }
.mobile-filter-btn.has-filters {
    background: rgba(43,72,217,0.08);
    border-color: rgba(43,72,217,0.35);
    color: var(--primary);
}

.filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 0 5px;
    line-height: 1;
}

/* ==============================
   Mobile Filter Sheet
   ============================== */
.mobile-filter-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 298;
    background: rgba(0,0,0,0.45);
}
.mobile-filter-backdrop.active { display: block; }

.mobile-filter-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 299;
    background: var(--surface);
    border-radius: 18px 18px 0 0;
    padding: 0 20px env(safe-area-inset-bottom, 20px);
    box-shadow: 0 -6px 32px rgba(0,0,0,0.18);
    max-height: 85vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.22s ease-out;
}
.mobile-filter-sheet.open {
    transform: translateY(0);
}
body.filter-sheet-open { overflow: hidden; }

.mobile-filter-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 12px;
    border-bottom: 1px solid rgba(15,23,42,0.08);
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
}
.mobile-filter-sheet-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-heading);
}

.mobile-filter-fields {
    padding: 16px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.mobile-filter-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}
.mobile-filter-label-inline {
    flex: 1;
}

.mobile-filter-input {
    font-size: 16px;
    padding: 11px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text-primary);
    width: 100%;
    box-sizing: border-box;
    box-shadow: none;
}
.mobile-filter-input:focus {
    outline: 2px solid var(--primary);
    background: var(--surface);
}

.mobile-filter-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}
.mobile-filter-legend {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.mobile-filter-checkboxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.mobile-filter-checkboxes label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 10px;
    cursor: pointer;
    user-select: none;
}
.mobile-filter-checkboxes input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    cursor: pointer;
    accent-color: var(--primary);
    box-shadow: none;
    padding: 0;
    border: none;
    background: none;
}
.mobile-filter-checkboxes label:has(input:checked) {
    background: rgba(43,72,217,0.08);
    border-color: rgba(43,72,217,0.35);
    color: var(--primary);
}

.mobile-filter-date-row {
    display: flex;
    gap: 10px;
}

.mobile-filter-actions {
    display: flex;
    gap: 10px;
    padding: 12px 0 16px;
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid rgba(15,23,42,0.07);
}
.mobile-filter-actions button {
    flex: 1;
    min-height: 44px;
    font-size: 15px;
}

/* Small screens */
@media (max-width: 600px) {
    .top-row { flex-direction: column; gap: 12px; }
    .top-row .left, .top-row .center, .top-row .right { width: 100%; max-width: none; }
    .strategy-row { flex-direction: column; gap: 10px; }
    #strategyOutput { width: 100%; }
    #resultsSummary { width: 100%; }

    /* Remove scroll — cards flow naturally */
    .table-scroll-wrapper {
        overflow: visible;
        max-height: none;
        border: none;
        border-radius: 0;
    }

    /* Show mobile filter button, hide desktop filter controls */
    .mobile-filter-btn { display: flex; }
    #historyControls,
    #historyPersistentControls { display: none; }
    #paginationControlsTop { display: none; }

    /* ==============================
       Card layout for history table
       ============================== */

    /* Flatten table structure */
    #betsHistoryTable,
    #betsHistoryTable tbody { display: block; width: 100%; }

    /* Hide thead (column headers + filter row) and tfoot (totals) */
    #betsHistoryTable thead,
    #betsHistoryTable tfoot { display: none; }

    /* Each row becomes a card */
    #betsHistoryTable tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        position: relative;
        background: var(--surface);
        border-radius: 12px;
        border: 1px solid var(--border-strong);
        box-shadow: 0 2px 8px rgba(15,23,42,0.05);
        padding: 11px 14px 0;
        margin-bottom: 10px;
        box-sizing: border-box;
    }

    /* Hide every cell by default */
    #betsHistoryTable tbody tr td {
        display: none;
        border: none;
        max-width: none;
        overflow: visible;
        white-space: normal;
        text-overflow: unset;
        background: transparent !important;
        box-sizing: border-box;
        padding: 0;
    }

    /* Line 1 — Date (stretches left, leaves gap for result badge) */
    #betsHistoryTable tbody tr td:nth-child(1) {
        display: block;
        order: 1;
        width: calc(100% - 100px);
        font-size: 12px;
        color: var(--muted);
        padding-bottom: 3px;
    }

    /* Result badge — absolute top-right */
    #betsHistoryTable tbody tr td:nth-child(11) {
        display: block;
        position: absolute;
        top: 11px;
        right: 14px;
        font-size: 12px;
        font-weight: 700;
        text-align: right;
        max-width: 90px;
        overflow: hidden;
    }
    #betsHistoryTable tbody tr[data-result="win"] td:nth-child(11) { color: var(--win); }
    #betsHistoryTable tbody tr[data-result="lost"] td:nth-child(11) { color: var(--loss); }
    #betsHistoryTable tbody tr[data-result="pending"] td:nth-child(11) { color: var(--pending); }
    #betsHistoryTable tbody tr[data-result="void"] td:nth-child(11) { color: #94a3b8; }
    #betsHistoryTable tbody tr[data-result="push"] td:nth-child(11) { color: #3b82f6; }
    /* Pending result: shrink the inline select to fit */
    #betsHistoryTable tbody tr[data-result="pending"] td:nth-child(11) select {
        font-size: 10px;
        padding: 3px 2px;
        width: 88px;
        max-width: 88px;
        box-sizing: border-box;
    }

    /* Line 2 — Event name */
    #betsHistoryTable tbody tr td:nth-child(2) {
        display: block;
        order: 2;
        width: 100%;
        font-size: 15px;
        font-weight: 700;
        color: var(--text-heading);
        word-break: break-word;
        padding: 0 76px 8px 0;
    }

    /* Line 3 — Book */
    #betsHistoryTable tbody tr td:nth-child(10) {
        display: block;
        order: 3;
        width: 100%;
        font-size: 12px;
        color: var(--muted);
        padding-bottom: 7px;
    }
    #betsHistoryTable tbody tr td:nth-child(10)::before {
        font-weight: 600;
    }

    /* Line 4 — Odds | Wager | To Win */
    #betsHistoryTable tbody tr td:nth-child(4),
    #betsHistoryTable tbody tr td:nth-child(7),
    #betsHistoryTable tbody tr td:nth-child(9) {
        display: flex;
        flex-direction: column;
        order: 4;
        width: 33.33%;
        gap: 3px;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-heading);
        padding-bottom: 10px;
    }
    #betsHistoryTable tbody tr td:nth-child(4)::before,
    #betsHistoryTable tbody tr td:nth-child(7)::before,
    #betsHistoryTable tbody tr td:nth-child(9)::before {
        display: block;
        font-size: 10px;
        font-weight: 500;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    #betsHistoryTable tbody tr td:nth-child(4)::before { content: "Odds"; }
    #betsHistoryTable tbody tr td:nth-child(7)::before { content: "Wager"; }
    #betsHistoryTable tbody tr td:nth-child(9)::before { content: "To Win"; }

    /* Line 5 — Edit button */
    #betsHistoryTable tbody tr td:nth-child(13) {
        display: flex;
        justify-content: flex-end;
        order: 5;
        width: 100%;
        padding: 6px 0 10px;
        border-top: 1px solid rgba(15,23,42,0.06);
    }
    #betsHistoryTable tbody tr td:nth-child(13) button {
        padding: 6px 14px;
        font-size: 12px;
        min-height: 34px;
    }

    /* Edit mode: revert to stacked list within the card */
    #betsHistoryTable tbody tr.edit-mode {
        display: block;
        padding: 10px 14px;
    }
    #betsHistoryTable tbody tr.edit-mode td {
        display: block !important;
        width: 100% !important;
        order: unset !important;
        position: static !important;
        padding: 4px 0 !important;
        text-align: left !important;
        font-size: 14px !important;
    }
    #betsHistoryTable tbody tr.edit-mode td:last-child {
        display: flex !important;
        gap: 4px;
        flex-wrap: wrap;
    }

    /* ==============================
       Step 4 — Text & touch sizes
       ============================== */

    /* Prevent iOS from auto-zooming inputs (requires font-size >= 16px) */
    body { font-size: 16px; }

    /* All text inputs, selects at 16px so iOS doesn't zoom on focus */
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
        min-height: 44px;
        padding: 10px 12px;
    }

    /* Form labels inside cards: slightly larger and spaced */
    .card label,
    form label {
        font-size: 15px;
        gap: 6px;
    }

    /* Primary action buttons: full 44px touch target */
    button:not(.mobile-auth-toggle):not(.auth-sheet-close):not(.bottom-nav-btn):not(.mobile-filter-btn) {
        min-height: 44px;
        font-size: 15px;
        padding: 10px 16px;
    }

    /* Compact secondary buttons that look better smaller (edit, copy etc) */
    button.small, button.icon-btn {
        min-height: 36px;
        font-size: 13px;
    }

    /* By Market table: show only Market, Win %, Net */
    .mkt-col-record,
    .mkt-col-winnings,
    .mkt-col-losses,
    .mkt-col-implied,
    .mkt-col-avgodds { display: none; }
}

/* Add Account form labels */
#addBankrollForm label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

#addBankrollForm label input {
    font-weight: 400;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

/* ==============================
   Signed-in indicator dot on avatar
   ============================== */
.mobile-auth-toggle.is-signed-in::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #2b48d9;
}

/* ==============================
   Bottom Navigation (mobile only)
   ============================== */
.bottom-nav {
    display: none;
}

.bottom-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 6px 0 4px;
    min-height: 44px;
    cursor: pointer;
    box-shadow: none;
    transition: color 0.12s ease;
}
.bottom-nav-btn svg { stroke: currentColor; flex-shrink: 0; }
.bottom-nav-btn.active { color: var(--primary); }
.bottom-nav-btn:hover:not(:disabled) {
    color: var(--primary);
    background: rgba(43,72,217,0.05);
    box-shadow: none;
}
.bottom-nav-btn:active { transform: none; }

@media (max-width: 700px) {
    :root { --bottom-nav-height: 56px; }

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

    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 199;
        height: var(--bottom-nav-height);
        background: var(--surface);
        border-top: 1px solid rgba(15,23,42,0.10);
        box-shadow: 0 -2px 12px rgba(15,23,42,0.08);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Tab section visibility */
    body.tab-wagering .top-row .center { display: none; }
    body.tab-wagering .top-row .right { display: none; }
    body.tab-wagering .history-section { display: none; }

    body.tab-accounts .top-row .left { display: none; }
    body.tab-accounts .top-row .center { display: none; }
    body.tab-accounts .top-row .summary { display: none; }
    body.tab-accounts .top-row .right { max-width: none; width: 100%; }
    body.tab-accounts .history-section { display: none; }

    body.tab-results .top-row .left,
    body.tab-results .top-row .right,
    body.tab-results .top-row .summary { display: none; }
    body.tab-results .history-section { display: none; }

    body.tab-history .top-row { display: none; }
}

/* ── Bets history loading bar ─────────────────────────────────────── */
.bets-loading-bar {
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    margin-bottom: 6px;
    overflow: hidden;
}
.bets-loading-bar-fill {
    height: 100%;
    width: 30%;
    background: var(--primary);
    border-radius: 2px;
    animation: loadingSlide 1.2s ease-in-out infinite;
}
@keyframes loadingSlide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* ── Strategy form disabled state while data loads ───────────────── */
.form-loading {
    position: relative;
    pointer-events: none;
    user-select: none;
}
.form-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 12px;
    z-index: 10;
}
[data-theme="dark"] .form-loading::after {
    background: rgba(15, 17, 23, 0.55);
}