/* Custom site styles extracted from pages and unified here */

/* Account page framed panels */
.account-frame { position:relative; border-radius:12px; padding:18px; background: rgba(255,255,255,0.06); box-shadow: 0 8px 20px rgba(0,0,0,0.18) inset, 0 6px 18px rgba(0,0,0,0.12); max-width:980px; margin:16px auto; }
.account-grid { display:flex; gap:18px; align-items:flex-start; }
.account-panel { background:#fff; border-radius:10px; padding:16px; box-shadow:0 6px 18px rgba(0,0,0,0.08); flex:1; min-width:260px; transition: transform 180ms ease, box-shadow 180ms ease; }
.account-panel h4 { margin-top:0; margin-bottom:10px; }
.account-field { display:flex; padding:6px 0; border-bottom:1px dashed #eee; }
.account-field .label { width:160px; font-weight:600; color:#333; }
.account-field .value { flex:1; color:#333; }
.account-actions { display:flex; gap:10px; align-items:center; margin-top:8px; }
.account-panel .btn { padding:8px 12px; border-radius:6px; }

/* Hover animation for account panels */
.account-panel:hover { transform: translateY(-6px); box-shadow: 0 12px 36px rgba(0,0,0,0.16); }

/* Game controls framed panels */
.game-controls-frame { position:relative; border-radius:12px; padding:14px; background: rgba(255,255,255,0.06); box-shadow: 0 8px 20px rgba(0,0,0,0.18) inset, 0 6px 18px rgba(0,0,0,0.12); max-width:1200px; }
.game-controls-grid { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; }
.control-panel { background:#fff; border-radius:8px; padding:12px; box-shadow:0 6px 18px rgba(0,0,0,0.08); min-width:220px; transition: transform 160ms ease, box-shadow 160ms ease; }
.control-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.control-panel label { display:block; font-weight:600; margin-bottom:6px; color:#333 }
.control-panel select, .control-panel input { padding:6px 8px; border-radius:6px; border:1px solid #ddd; }
.control-panel .btn { margin-top:8px; }

/* Hover/active states for control panels */
.control-panel:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
.control-panel:active { transform: translateY(-2px); }

/* Booster / seat tweaks (moved from page) */
.booster-placeholder { border:1px dashed #cfcfcf; background:#fbfbfb; padding:6px; }
.ph-image { border-radius:2px; }
.seat-table td { width:160px; }
@media (max-width:768px) { #divLayout { padding:8px; } }
.seating-frame { height: 100%; width:100%; max-width:1200px; }
#tblSeats { display:flex; align-items:center; justify-content:center; height:100%; width:80%; margin:0 auto; box-sizing:border-box; }

/* small button style for consistency - ensure high contrast text for accessibility */
.btn { background:#f5f5f5; border:1px solid #ccc; padding:6px 10px; border-radius:6px; cursor:pointer; color:#222 !important; }
.btn:hover { background:#e6eefc; color:#111 !important; }

/* Primary variant for emphasis (use where needed) */
.btn-primary { background:#2b6cdf; border-color:#265ecf; color:#fff !important; }
.btn-primary:hover { background:#254fc2; border-color:#2345b8; }

/* Account/controls responsiveness */
@media (max-width:800px) {
    .account-grid, .game-controls-grid { flex-direction:column; }
}

/* ── Dark Mode Toggle Button ── */
.dark-mode-toggle { background:none; border:1px solid rgba(255,255,255,0.3); border-radius:20px; padding:4px 12px; cursor:pointer; font-size:16px; color:#fff; transition:all 0.3s; margin-left:8px; line-height:1; }
.dark-mode-toggle:hover { border-color:rgba(255,255,255,0.3); background:none; }

/* ── Dark Mode Theme ── */
body.dark-mode { background-color:#1a1a2e !important; background-image:none !important; }
body.dark-mode #divMainResults { background-color:#16213e !important; color:#e0e0e0; }

/* Filter panels */
body.dark-mode .filter-panel { background:#1a1a2e; border-color:#2a2a4a; color:#e0e0e0; box-shadow:0 2px 8px rgba(0,0,0,0.3); }
body.dark-mode .filter-header h3 { color:#e0e0e0; }
body.dark-mode .filter-header .toggle-icon { color:#aaa; }
body.dark-mode .filter-label { color:#aaa; }
body.dark-mode .filter-row label { color:#ccc; }
body.dark-mode .filter-row select,
body.dark-mode .filter-row .form-control,
body.dark-mode .form-control,
body.dark-mode select,
body.dark-mode textarea { background:#0f3460; border-color:#2a2a4a; color:#e0e0e0; }
body.dark-mode .filter-chip:not(.active) { background:transparent; color:#666; border-color:#333; }

/* Multiselect widget */
body.dark-mode .ms-options-wrap > button:focus,
body.dark-mode .ms-options-wrap > button { background-color:#0f3460; border-color:#2a2a4a; color:#aaa; }
body.dark-mode .ms-options-wrap.ms-has-selections > button { color:#e0e0e0; }
body.dark-mode .ms-options-wrap > .ms-options { background:#1a1a2e; border-color:#2a2a4a; }
body.dark-mode .ms-options-wrap > .ms-options > .ms-search input { background:#0f3460; color:#e0e0e0; border-color:#2a2a4a; }
body.dark-mode .ms-options-wrap > .ms-options > ul label.focused,
body.dark-mode .ms-options-wrap > .ms-options > ul label:hover { background-color:#0f3460; border-color:#4361ee; }
body.dark-mode .ms-options-wrap > .ms-options > ul li.selected label { background-color:#1a3a6a; }
body.dark-mode .ms-options-wrap > .ms-options > ul label { color:#e0e0e0; }

/* Stats table (CardStats) */
body.dark-mode .stats-table thead th { background:#1a1a2e; color:#aaa; border-color:#2a2a4a; }
body.dark-mode .stats-table thead th:hover { color:#e0e0e0; background:#2a2a4a; }
body.dark-mode .stats-table tbody td { color:#e0e0e0; border-color:#2a2a4a; }
body.dark-mode .stats-table tbody tr:nth-child(even) { background:#0f3460; }
body.dark-mode .stats-table tbody tr:hover { background:#1a4080 !important; }
body.dark-mode .stats-table tfoot td { background:#1a1a2e; border-color:#2a2a4a; color:#e0e0e0; }

/* Results container */
body.dark-mode #divResultsScrollContainer { background:#16213e; border-color:#2a2a4a; box-shadow:0 2px 8px rgba(0,0,0,0.3); }

/* Deck rows (PlayerDecks) */
body.dark-mode .rowHeader { background:#2a2a4a; color:#e0e0e0; }
body.dark-mode .rowStyle { color:#e0e0e0; border-color:#2a2a4a; }
body.dark-mode .rowStyle:hover { background:#1a4080; }
body.dark-mode .rowAlternatingStyle { background:#0f3460; color:#e0e0e0; border-color:#2a2a4a; }
body.dark-mode .rowAlternatingStyle:hover { background:#1a4080; }
body.dark-mode .deckHeader { color:#e0e0e0; }
body.dark-mode .deckHeader:hover { background:rgba(26,64,128,0.5) !important; }

/* Modal */
body.dark-mode .modal-overlay { background:rgba(0,0,0,0.7); }
body.dark-mode .modal-container { background:#16213e; color:#e0e0e0; }
body.dark-mode .close-button { color:#aaa; }
body.dark-mode .close-button:hover { background:#4a2a2a; color:#ff6b6b; }

/* Attribution / misc */
body.dark-mode .attribution { color:#777; }
body.dark-mode .attribution a { color:#6c8dff; }
body.dark-mode .results-count { color:#aaa; }
body.dark-mode .btn-export { background:#1a5c30; border-color:#1a5c30; }
body.dark-mode .btn-export:hover { background:#166328; border-color:#166328; }

/* Card hover overlay */
#cardHoverOverlay { position:fixed; z-index:10001; pointer-events:none; opacity:0; transition:opacity 0.15s; }
#cardHoverOverlay img { max-width:300px; max-height:420px; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,0.4); }

/* ── Dark Mode: Play page ── */
/* Welcome banner: override inline background/border/color */
body.dark-mode #divWelcomeBanner { background:#0f3460 !important; border-color:#2a2a4a !important; color:#e0e0e0 !important; }
body.dark-mode #divWelcomeBanner div { color:#e0e0e0 !important; }
body.dark-mode #divGameMessage { color:#ff8a8a !important; }
/* Control frames and panels */
body.dark-mode .game-controls-frame { background:rgba(255,255,255,0.03) !important; box-shadow:0 8px 20px rgba(0,0,0,0.3) inset, 0 6px 18px rgba(0,0,0,0.2) !important; }
body.dark-mode .control-panel { background:#1a1a2e !important; color:#e0e0e0 !important; border-color:#2a2a4a !important; box-shadow:0 6px 18px rgba(0,0,0,0.2) !important; }
body.dark-mode .control-panel h3 { color:#e0e0e0 !important; }
body.dark-mode .control-panel label { color:#ccc !important; }
body.dark-mode .control-panel select,
body.dark-mode .control-panel input { background:#0f3460 !important; border-color:#2a2a4a !important; color:#e0e0e0 !important; }
/* Seating area */
body.dark-mode #divSeating { color:#e0e0e0; }
body.dark-mode #divSeating label { color:#ccc !important; }
body.dark-mode #divSeating select { background:#0f3460 !important; border-color:#2a2a4a !important; color:#e0e0e0 !important; }
body.dark-mode .seat { background:#0f3460 !important; border-color:#4a6fa5 !important; color:#e0e0e0 !important; }
body.dark-mode .seat div { color:#e0e0e0 !important; }
body.dark-mode .seat-sub { color:#aaa !important; }
/* GamePlay columns: override inline and page-level background:#fff */
body.dark-mode #divGamePlayContent > #divLeftStack,
body.dark-mode #divGamePlayContent > #divMainArea { background:#16213e !important; border-color:#2a2a4a !important; color:#e0e0e0 !important; }
body.dark-mode #divGamePlayContent > #divLeftStack::before,
body.dark-mode #divGamePlayContent > #divMainArea::before { background:linear-gradient(to bottom, rgba(15,52,96,0.3), transparent 80%) !important; }
body.dark-mode #divGamePlayContent > #divLeftStack::after,
body.dark-mode #divGamePlayContent > #divMainArea::after { background:linear-gradient(to top, rgba(15,52,96,0.3), transparent 80%) !important; }
/* Pack area, card placeholders, labels */
body.dark-mode .booster-placeholder { background:#1a1a2e !important; border-color:#2a2a4a !important; }
body.dark-mode .panel-label, body.dark-mode .deck-header { color:#e0e0e0 !important; }
body.dark-mode #divLayout { color:#e0e0e0; }
/* Scrollbar in dark mode */
body.dark-mode #divSelectedCards::-webkit-scrollbar { background:#1a1a2e; }
body.dark-mode #divSelectedCards::-webkit-scrollbar-track { background:#1a1a2e; }
body.dark-mode #divSelectedCards::-webkit-scrollbar-thumb { background:#4a6fa5; }

/* ── Dark Mode: GameHistory page ── */
body.dark-mode .game-list { background:#1a1a2e; border-color:#2a2a4a; color:#e0e0e0; }
body.dark-mode .game-row { color:#e0e0e0; border-color:#2a2a4a; }
body.dark-mode .game-row:nth-child(even) { background:#0f3460 !important; }
body.dark-mode .game-row:hover, body.dark-mode .game-row.hover { background:#1a4080 !important; }
body.dark-mode .game-row.selected { background:#1a4080 !important; }
body.dark-mode .replay-area { background:#1a1a2e; border-color:#2a2a4a; color:#e0e0e0; }
body.dark-mode .left-col.collapsed { background:#16213e; border-color:#2a2a4a; }
body.dark-mode .collapse-toggle { background:#0f3460; border-color:#2a2a4a; color:#e0e0e0; }
body.dark-mode .collapse-toggle:hover { background:#1a4080; }
body.dark-mode .two-col h2 { color:#e0e0e0; }