/* The few client-portal pieces Superadmin keeps in its page components (panel.css is Superadmin's own stylesheet). */
.data-table .numeric input { width: 110px; min-height: 26px; padding: 3px 6px; text-align: right; font-variant-numeric: tabular-nums; }
.data-table .numeric input.mine { border-color: var(--action); background: #eef3fb; color: #12305f; font-weight: 700; }
.data-table td small { display: block; color: #697583; font-size: 10px; }
.data-table.compact { min-width: 420px; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.status-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.live { color: var(--negative); background: #fde8eb; }
.status-pill.set { color: var(--action); background: #e6edf8; }
.status-pill.off { color: var(--muted); background: #eef1f4; }
.panel-body { padding: 10px; }
.sticky-actions { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; gap: 7px; padding: 9px 0; background: #f1f2f3; border-top: 1px solid #d5dae0; }
.button.danger { color: var(--negative); background: #fff; border-color: #d8a3ab; }
.button.danger:hover:not(:disabled) { background: #fff0f1; }
.filters select { min-width: 140px; }
.account-layout { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 14px; align-items: start; }
.account-layout .form-body { display: grid; gap: 10px; padding: 12px; }
.account-layout .form-body > .button { justify-self: start; }
.account-note { padding: 14px; border: 1px solid var(--border); border-radius: 2px; background: #fff; color: #4a5866; font-size: 11px; line-height: 1.6; }
.account-note h2 { margin-bottom: 6px; }
@media (max-width: 800px) { .account-layout { grid-template-columns: 1fr; } }
.log-tabs { display: flex; gap: 4px; margin: 0 0 10px; border-bottom: 1px solid var(--border); }
.log-tabs a { padding: 7px 12px; border: 1px solid transparent; border-bottom: 0; border-radius: 3px 3px 0 0; color: #384c66; font-size: 11px; font-weight: 700; }
.log-tabs a.active { background: #fff; border-color: var(--border); color: var(--action); margin-bottom: -1px; }
.log-tabs a:hover:not(.active) { background: #e9ecef; }
.log-details summary { cursor: pointer; color: var(--action); font-size: 10px; font-weight: 700; white-space: nowrap; }
.log-details pre { max-width: 520px; max-height: 260px; overflow: auto; margin: 6px 0; padding: 6px; background: #f6f8fa; border: 1px solid #dce1e6; font-size: 10px; white-space: pre-wrap; word-break: break-all; }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 11px; color: var(--muted); }
.pager [aria-disabled="true"] { opacity: .5; }
.dash-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.dash-card { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: 2px; background: #fff; }
.dash-card strong { font-size: 22px; color: #203f67; }
.dash-card strong small { font-size: 11px; color: var(--muted); font-weight: 400; }
.dash-card dl { display: grid; gap: 3px; margin: 0; font-size: 11px; }
.dash-card dl div { display: flex; justify-content: space-between; gap: 8px; }
.dash-card dt { color: var(--muted); }
.dash-card dd { margin: 0; font-weight: 700; color: #304863; text-align: right; }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dash-health { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dash-health div, .dash-controls a { display: grid; gap: 3px; padding: 9px; border: 1px solid #dce1e6; border-radius: 2px; background: #f8fafc; }
.dash-health span, .dash-controls span { color: var(--muted); font-size: 10px; }
.dash-health b, .dash-controls b { font-size: 16px; color: #203f67; }
.dash-controls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.dash-controls a:hover { background: #eef3fb; text-decoration: none; }
@media (max-width: 1100px) { .dash-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-grid { grid-template-columns: 1fr; } .dash-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dash-cards, .dash-health, .dash-controls { grid-template-columns: 1fr; } }
.ladder-table { margin: 6px 0 0; border-collapse: collapse; font-size: 10px; min-width: 160px; }
.ladder-table th, .ladder-table td { padding: 2px 8px; border: 1px solid #dce1e6; background: #fff; }
.ladder-table th { background: #eef2f7; color: #40536b; }
.event-score { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: #203f67; font-size: 11px; font-weight: 700; }
.event-exposure { display: grid; gap: 2px; justify-items: end; font-size: 11px; color: var(--muted); text-align: right; }
.event-exposure b { margin-left: 4px; }
.activity-lines { margin: 4px 0 0; padding-left: 16px; color: #3f4b59; font-size: 10px; line-height: 1.6; }
.data-table tr.bet-row td { background: #fbfcfd; font-size: 10px; color: #4a5866; }
.bet-indent { color: #9aa7b6; margin-right: 2px; }
.day-toggle { margin: 0; border-bottom: 0; }
.data-table tfoot td { background: #eef2f7; }

/* IDs shown in their own column: easy to read and copy. */
.market-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; white-space: nowrap; user-select: all; }

/* Players → one player: profit event by event, each opening to its markets. */
.event-profit { border-top: 1px solid #dce1e6; }
.event-profit > summary { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(80px, .6fr) repeat(5, minmax(110px, 1fr)); gap: 10px; align-items: center; padding: 8px 12px; cursor: pointer; list-style: none; }
.event-profit > summary::-webkit-details-marker { display: none; }
.event-profit > summary::before { content: "\25B8"; position: absolute; margin-left: -10px; color: var(--action); }
.event-profit[open] > summary::before { content: "\25BE"; }
.event-profit > summary:hover { background: #f6f8fa; }
.event-profit-name small { display: block; color: #70839c; font-size: 10px; }
.event-profit .table-scroll { padding: 0 12px 10px 24px; }
@media (max-width: 760px) { .event-profit > summary { grid-template-columns: 1fr 1fr; } .event-profit-name { grid-column: 1 / -1; } }

/* Players: Block new bets / Unblock. */
.inline-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.stop-button { background: #b52235; border-color: #a51d2e; color: #fff; }
.stop-button:hover:not(:disabled) { background: #971a2b; border-color: #971a2b; }

/* Players -> one player: a market row opens its bets below. */
.market-bets-toggle { cursor: pointer; }
.market-bets-toggle:hover { background: #f6f8fa; }
.market-bets-caret { color: var(--action); font-size: 10px; }
.market-bets-toggle[aria-expanded="true"] .market-bets-caret { display: inline-block; transform: rotate(90deg); }
.market-bets-row > td { padding: 6px 0 12px 18px; background: #fbfcfd; }

/* Live pages: the live bets socket's state beside the heading (panel.js). */
.heading-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.live-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted, #6b7280); white-space: nowrap; }
.live-badge:empty { display: none; }
.live-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; }
.live-badge[data-state="live"] { color: #15803d; }
.live-badge[data-state="live"]::before { background: #16a34a; box-shadow: 0 0 0 3px #dcfce7; }
.live-badge[data-state="reconnecting"]::before, .live-badge[data-state="connecting"]::before { background: #f59e0b; }
.live-badge[data-state="error"]::before { background: #dc2626; }
@keyframes live-flash { from { background: #fff4c2; } to { background: transparent; } }
tr.live-flash > td { animation: live-flash 3s ease-out; }

/* Risk Management: one more column on the event line, and a market's book as runner / P&L pairs. */
.risk-event > summary { grid-template-columns: minmax(220px, 2fr) minmax(80px, .6fr) repeat(5, minmax(100px, 1fr)); }
@media (max-width: 760px) { .risk-event > summary { grid-template-columns: 1fr 1fr; } }
.risk-book { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 200px; }
.risk-book li { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.ladder-row > td { padding-top: 0; }
.risk-market + .risk-market > tr:first-child > td { border-top: 2px solid #b8c2cf; padding-top: 14px; }
.risk-market > tr:last-child > td { padding-bottom: 14px; }
.ladder-strip { overflow-x: auto; max-width: 100%; }
.ladder-h { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.ladder-h th, .ladder-h td { padding: 3px 10px; border: 1px solid #dce1e6; background: #fff; text-align: center; }
.ladder-h td { min-width: 72px; }
.ladder-h .ladder-runs + tr + .ladder-runs > * { border-top: 3px solid #dce1e6; }
.ladder-h th { background: #eef2f7; color: #40536b; text-align: left; position: sticky; left: 0; }

/* The Live switch beside a live page's heading (Bets): a two-part button, Live | Off, sized like .button. */
.live-switch { display: inline-flex; align-items: stretch; min-height: 30px; border: 1px solid #afb9c6; border-radius: 3px; overflow: hidden; cursor: pointer; user-select: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: #fff; }
.live-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.live-switch span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; color: #6b7a8c; transition: background .15s, color .15s; }
.live-switch .live-off { border-left: 1px solid #afb9c6; }
.live-switch .live-on i { width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; }
.live-switch input:checked ~ .live-on { color: #fff; background: #16a34a; }
.live-switch input:checked ~ .live-on i { background: #fff; animation: live-pulse 1.6s ease-in-out infinite; }
.live-switch input:not(:checked) ~ .live-off { color: #fff; background: #66717d; }
.live-switch:hover span { filter: brightness(.97); }
.live-switch:has(input:focus-visible) { outline: 2px solid var(--action); outline-offset: 2px; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.book-odds { margin-left: 6px; padding: 0 4px; border-radius: 3px; background: #eef3f8; color: #2c5a80; font-size: 10px; font-weight: 700; white-space: nowrap; }
.book-odds.stale { opacity: .55; }
.book-odds { color: #66717d; }
.book-odds .odds-back { color: #1565c0; }
.book-odds .odds-lay { color: #c62828; }
/* Dashboard: top winners / losers and their period switch */
.top-periods { display: inline-flex; border: 1px solid #c9d4e3; border-radius: 4px; overflow: hidden; }
.top-periods a { padding: 6px 12px; color: #173d71; font-size: 12px; font-weight: 600; text-decoration: none; border-left: 1px solid #c9d4e3; }
.top-periods a:first-child { border-left: 0; }
.top-periods a.active { background: #173d71; color: #fff; }
.top-players { padding: 0 14px 14px; }
@media (max-width: 640px) { .top-periods { flex-wrap: wrap; } }
/* Fraud Management (/fraud). */
.fraud-player > summary { grid-template-columns: minmax(180px, 1.4fr) minmax(160px, 1.6fr) repeat(3, minmax(90px, .8fr)) minmax(100px, .8fr); }
@media (max-width: 760px) { .fraud-player > summary { grid-template-columns: 1fr 1fr; } }
.fraud-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.fraud-body { padding: 4px 12px 14px 24px; }
.fraud-body .table-scroll { padding: 0; }
.fraud-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 4px 0 10px; }
.fraud-check { margin: 0 0 12px; }
.fraud-check h3 { margin: 0 0 6px; font-size: 13px; }
.fraud-check h3 small { display: block; margin-top: 2px; color: var(--muted); font-weight: 400; }
.fraud-review { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding-top: 10px; border-top: 1px dashed #dce1e6; }
.fraud-rules { margin: 0; padding: 4px 16px 14px 32px; display: grid; gap: 6px; font-size: 12px; color: #40536b; }
/* Dashboard: winners vs losers (players, amount and bets) over the Top players period. */
.win-lose { display: grid; gap: 8px; padding: 4px 16px 12px; }
.win-lose-row { display: grid; grid-template-columns: 70px minmax(160px, 1fr) minmax(260px, 1.4fr); gap: 12px; align-items: center; font-size: 12px; }
.win-lose-label { font-weight: 700; color: #40536b; }
.win-lose-bar { display: flex; gap: 2px; height: 12px; border-radius: 4px; overflow: hidden; background: #eef1f4; }
.win-lose-bar i { display: block; height: 100%; }
.win-lose-bar i.up { background: var(--positive, #167344); }
.win-lose-bar i.down { background: var(--negative, #b52235); }
.win-lose-figures small { color: var(--muted, #66717d); }
@media (max-width: 760px) { .win-lose-row { grid-template-columns: 1fr; gap: 4px; } }
/* Profit & Loss (/profit-loss): one event per row, its markets under it. */
.pl-event > summary { grid-template-columns: minmax(96px, .6fr) minmax(220px, 2fr) repeat(5, minmax(100px, 1fr)); }
.pl-date small { display: block; color: #70839c; font-size: 10px; }
@media (max-width: 760px) { .pl-event > summary { grid-template-columns: 1fr 1fr; } }
/* Bets: the market's price when the bet was taken. */
.current-price { white-space: nowrap; }
.current-price small { display: block; }
.player-id-line { margin: 2px 0 6px; color: var(--muted, #66717d); }
/* Dashboard: your P&L day by day, as a table. */
.daily-pl-stats { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 0 16px 8px; font-size: 12px; color: var(--muted); }
.daily-pl-stats b { color: #203f67; }
.daily-pl-table tfoot td { border-top: 2px solid #dce1e6; }