/* Table Renderer styles: keep here to centralize all table-specific styling */
.tbl{width:100%;border-collapse:collapse;font-family:inherit;background:var(--card);border:1px solid var(--muted-border);border-radius:8px;overflow:hidden}
.tbl thead th{background:linear-gradient(180deg,rgba(0,0,0,0.02),rgba(0,0,0,0.01));padding:8px;text-align:left;font-weight:600;border-bottom:1px solid var(--muted-border)}
/* Center payoff table column headers even when generic table headers are left-aligned */
.tbl.payoff-table thead th,
.payoff-table thead th {
  text-align: center;
}
.tbl tbody td{padding:8px;border-top:1px solid var(--muted-border);vertical-align:middle}
.tbl-row:nth-child(odd){background:transparent}
.tbl-compact thead th,.tbl-compact tbody td{padding:6px}
.tbl-cell{padding:8px}
.tbl-header{font-weight:700}
.muted{color:var(--muted)}
.accent{color:var(--accent)}
.tbl-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:middle;border:1px solid rgba(0,0,0,0.06)}
.tbl-dot-label{vertical-align:middle}
.tbl .readonly-input{background:var(--input-bg);border:1px solid var(--input-border);padding:6px;border-radius:6px;color:var(--text)}
.tbl .tbl-action-btn{padding:6px 10px;border-radius:6px}
.tbl .tbl-number{text-align:right}
.tbl .text-clickable{cursor:pointer;text-decoration:underline}

/* utility backgrounds */
.bg-green{background:var(--cell-peace-peace-bg, #e6f4ea)}
.bg-red{background:var(--cell-war-war-bg, #ffecec)}

/* small responsive tweak */
@media (max-width:800px){
  .tbl thead th{font-size:0.95rem}
  .tbl tbody td{font-size:0.95rem;padding:6px}
}

/* Narrow-screen tweaks for payoff table inputs to avoid oversized cells */
@media (max-width:800px) {
  .payoff-table td input,
  .payoff-table td input.payoff-input,
  .payoff-table td .readonly-input {
    width: auto !important;
    max-width: 72px;
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .payoff-table td, .payoff-table th { padding: 4px; }
}

/* Prevent payoff/table inputs from becoming too large on wide layouts */
.payoff-table td input,
.payoff-table td .readonly-input {
  max-width: 120px;
}

/* Constrain generic table inputs so they remain consistent */
.tbl input, .tbl select, .tbl textarea { max-width: 320px; }

/* Payoff table: make first column match header emphasis */
.tbl tbody td.payoff-first-col{font-weight:600}

/* Game Info / Settings card: ensure payoff table fits and use normal weight */
.settings-card .tbl{width:100%;table-layout:fixed;font-weight:400;font-size:0.95rem}
.settings-card .tbl thead th,.settings-card .tbl tbody td{font-weight:400}
.settings-card .tbl tbody td.payoff-first-col{font-weight:400}
.settings-card .tbl tbody td input,.settings-card .tbl tbody td .readonly-input{width:100%;box-sizing:border-box;padding:6px;font-weight:400}
.settings-card .payoff-table{width:100%;table-layout:fixed}
.settings-card .payoff-table td,.settings-card .payoff-table th{font-weight:400}

/* Leaderboard top styles */
.leader-top1{font-size:1.25rem;font-weight:800}
.leader-top2{font-size:1.12rem;font-weight:700}
.leader-top3{font-size:1.05rem;font-weight:700}
.leader-dot{width:14px;height:14px}

/* History table: fixed layout with ellipsis for narrow columns */
.history-table{table-layout:fixed;width:100%}
.history-table th,.history-table td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-table th{padding:6px}

/* Conditional formatting for history cells (based on myChoice/opponentChoice) */
/* conditional cell colors (use variables so dark mode can override) */
.history-table td.cell-war-war{background:var(--cell-war-war-bg);color:var(--cell-war-war-color)}
.history-table td.cell-peace-peace{background:var(--cell-peace-peace-bg);color:var(--cell-peace-peace-color)}
.history-table td.cell-war-peace{background:var(--cell-war-peace-bg);color:var(--cell-war-peace-color)}
.history-table td.cell-peace-war{background:var(--cell-peace-war-bg);color:var(--cell-peace-war-color)}
/* subtle padding and border radius to improve appearance */
.history-table td.cell-war-war, .history-table td.cell-peace-peace, .history-table td.cell-war-peace, .history-table td.cell-peace-war{border-radius:6px;padding:6px}


/* Ensure selected styles override table-action defaults (higher specificity) */
.tbl .tbl-action-btn.selected-peace{background:var(--selected-peace-bg);color:var(--selected-peace-color)}
.tbl .tbl-action-btn.selected-war{background:var(--selected-war-bg);color:var(--selected-war-color)}

/* Disabled table action buttons should use theme-aware disabled tokens */
.tbl .tbl-action-btn:disabled{
  /* Match the secondary button appearance but with disabled cursor */
  background: var(--btn-secondary-bg);
  color: var(--accent);
  cursor: not-allowed;
  opacity: 1;
}

/* If a selected button becomes disabled, ensure disabled look overrides selected visuals */
.tbl .tbl-action-btn.selected-peace:disabled,
.tbl .tbl-action-btn.selected-war:disabled{
  background: var(--btn-secondary-bg) !important;
  color: var(--accent) !important;
}

/* Generic scroll wrapper used by TableRenderer when maxHeight specified */
.tbl-scroll-container{overflow-y:auto}