/* =====================================================================
   PickleMix · New design — BUTTON COLORS + DEPTH
   Loaded right after style-v2.css. Only affects the New design (html.ui-v2);
   the Classic design never sees these rules. Colors and shadows only:
   no size, layout, label or behaviour changes.

   Color = meaning (the same color always means the same kind of button):
     solid blue    main action            solid green   start / play      solid orange  end
     soft purple   TV & display           soft teal     players / check-in
     soft blue     stats, export, refresh soft amber    leaderboard / call next
     soft red      delete / reset         soft green    toggle ON   (plain gray = OFF)
   ===================================================================== */

html.ui-v2[data-v2-theme="light"] {
    --c-purple: #6d28d9; --c-purple-bg: #f1ebff; --c-purple-bd: #d9c8ff;
    --c-teal: #0f766e;   --c-teal-bg: #e3f5f2;   --c-teal-bd: #b3e2da;
    --c-blue: #1d5fd1;   --c-blue-bg: #e9f1ff;   --c-blue-bd: #c3d7fb;
    --c-green: #1f7a33;  --c-green-bg: #e7f6ea;  --c-green-bd: #b9e2c2;
    --c-amber: #8a5a00;  --c-amber-bg: #fff3d1;  --c-amber-bd: #f1d58a;
    --c-orange: #b5470b; --c-orange-bg: #fff0e3; --c-orange-bd: #f7cfaa;
    --c-red: #c0352b;    --c-red-bg: #fdecea;    --c-red-bd: #f3c2bd;
    --c-gray: #3c4a5c;   --c-gray-bg: #f3f5f9;   --c-gray-bd: #d6dde7;
    --c-edge: rgba(20, 32, 46, .14);
    --c-lift: 0 1px 2px rgba(20, 32, 46, .10);
    --c-lift-hover: 0 4px 12px rgba(20, 32, 46, .14);
}
html.ui-v2[data-v2-theme="dark"] {
    --c-purple: #c4b0ff; --c-purple-bg: #2a2145; --c-purple-bd: #4b3d7a;
    --c-teal: #6ee7d8;   --c-teal-bg: #0f2f2c;   --c-teal-bd: #1f5550;
    --c-blue: #8fb8ff;   --c-blue-bg: #16264a;   --c-blue-bd: #2b4579;
    --c-green: #6fd88a;  --c-green-bg: #143020;  --c-green-bd: #27583a;
    --c-amber: #ffd166;  --c-amber-bg: #3a2d0c;  --c-amber-bd: #6a5418;
    --c-orange: #fdba74; --c-orange-bg: #3a230f; --c-orange-bd: #6a4220;
    --c-red: #ff8a80;    --c-red-bg: #3a1714;    --c-red-bd: #6b2a24;
    --c-gray: #c9d3df;   --c-gray-bg: #1f2934;   --c-gray-bd: #364353;
    --c-edge: rgba(0, 0, 0, .45);
    --c-lift: 0 1px 2px rgba(0, 0, 0, .45);
    --c-lift-hover: 0 4px 14px rgba(0, 0, 0, .5);
}

/* ---------- 1. A little depth on every button (pressable, still flat) ---------- */
html.ui-v2 body .btn:not(:disabled),
html.ui-v2 body .btn-aesthetic:not(:disabled),
html.ui-v2 body .add-up-next-players:not(:disabled),
html.ui-v2 body .ap-call-btn,
html.ui-v2 body .pm-cleanup-btn,
html.ui-v2 body .lb-open-btn,
html.ui-v2 body .leaderboard-search-btn,
html.ui-v2 body .btn-edit-game,
html.ui-v2 body .btn-delete-game,
html.ui-v2 body .status-btn,
html.ui-v2 body .game-mode-pill {
    box-shadow: inset 0 -1px 0 var(--c-edge), var(--c-lift) !important;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, filter .12s ease !important;
}
html.ui-v2 body .btn:not(:disabled):hover,
html.ui-v2 body .btn-aesthetic:not(:disabled):hover,
html.ui-v2 body .add-up-next-players:not(:disabled):hover,
html.ui-v2 body .ap-call-btn:hover,
html.ui-v2 body .pm-cleanup-btn:hover,
html.ui-v2 body .lb-open-btn:hover,
html.ui-v2 body .leaderboard-search-btn:hover,
html.ui-v2 body .btn-edit-game:hover,
html.ui-v2 body .btn-delete-game:hover,
html.ui-v2 body .status-btn:hover,
html.ui-v2 body .game-mode-pill:hover {
    transform: translateY(-1px) !important;
    box-shadow: inset 0 -1px 0 var(--c-edge), var(--c-lift-hover) !important;
}
html.ui-v2 body .btn:not(:disabled):active,
html.ui-v2 body .btn-aesthetic:not(:disabled):active,
html.ui-v2 body .add-up-next-players:not(:disabled):active,
html.ui-v2 body .ap-call-btn:active,
html.ui-v2 body .pm-cleanup-btn:active,
html.ui-v2 body .lb-open-btn:active,
html.ui-v2 body .leaderboard-search-btn:active,
html.ui-v2 body .btn-edit-game:active,
html.ui-v2 body .btn-delete-game:active,
html.ui-v2 body .status-btn:active,
html.ui-v2 body .game-mode-pill:active {
    transform: translateY(0) !important;
    box-shadow: inset 0 1px 2px var(--c-edge) !important;
}
/* the active game mode keeps its own look */
html.ui-v2 body .game-mode-pill.active { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .18), var(--c-lift) !important; }

/* ---------- 2. Soft tints (light background, colored text and icon) ---------- */
/* TV & display → purple */
html.ui-v2 #home #tv-controls-section #tv-top5-logo-upload-btn.btn,
html.ui-v2 #home #tv-controls-section #tv-fullscreen-top-btn.btn:not(.is-on),
html.ui-v2 #home #tv-controls-section #tv-minimize-top-btn.btn:not(.is-on),
html.ui-v2 #home #tv-controls-section .sort-btn.btn:not(.is-on):not(#open-court-tv-display),
html.ui-v2 #home #tv-controls-section #tv-customize-btn.btn,
html.ui-v2 #leaderboard #openLeaderboardTVBtn.btn,
html.ui-v2 #leaderboard #leaderboardTvSettingsBtn.btn,
html.ui-v2 body .up-next-box .tv-control-btn.btn:nth-child(3) {
    background: var(--c-purple-bg) !important; color: var(--c-purple) !important; border-color: var(--c-purple-bd) !important;
}
/* refresh → blue */
html.ui-v2 #home #tv-controls-section #tv-refresh-btn.btn {
    background: var(--c-blue-bg) !important; color: var(--c-blue) !important; border-color: var(--c-blue-bd) !important;
}
/* careful → red */
html.ui-v2 #home #tv-controls-section #tv-top5-logo-remove-btn.btn,
html.ui-v2 #courts #clear-up-next-btn.btn,
html.ui-v2 #leaderboard #reset-leaderboard.btn {
    background: var(--c-red-bg) !important; color: var(--c-red) !important; border-color: var(--c-red-bd) !important;
}
html.ui-v2 #leaderboard #reset-all-leaderboards.btn {
    background: var(--c-orange-bg) !important; color: var(--c-orange) !important; border-color: var(--c-orange-bd) !important;
}
/* help → neutral, but with an edge */
html.ui-v2 #home #tv-controls-section #tv-help-btn.btn {
    background: var(--c-gray-bg) !important; color: var(--c-gray) !important; border-color: var(--c-gray-bd) !important;
}
/* toggles (Stats, Team Colors, Intro Sounds, Check-in QR): ON = soft green, OFF = plain gray */
html.ui-v2 #home #tv-controls-section #tv-stats-toggle-btn.btn:not(.is-on),
html.ui-v2 #home #tv-controls-section #tv-team-colors-toggle-btn.btn:not(.is-on),
html.ui-v2 #home #tv-controls-section #tv-intro-sfx-btn.btn:not(.is-on),
html.ui-v2 #home #tv-controls-section #tv-qr-mode-btn.btn {
    background: var(--c-gray-bg) !important; color: var(--c-gray) !important; border-color: var(--c-gray-bd) !important;
}
html.ui-v2 #home #tv-controls-section #tv-qr-mode-btn.btn[style*="40, 167, 69"],
html.ui-v2 #home #tv-controls-section #tv-qr-mode-btn.btn[style*="#28a745"] {
    background: var(--c-green-bg) !important; color: var(--c-green) !important; border: 1.5px solid var(--c-green) !important; font-weight: 800 !important;
}
/* Up Next tools */
html.ui-v2 #courts #add-next-four-btn.btn {
    background: var(--c-blue-bg) !important; color: var(--c-blue) !important; border-color: var(--c-blue-bd) !important;
}
html.ui-v2 #courts #add-up-next-game-btn.btn {
    background: var(--c-green-bg) !important; color: var(--c-green) !important; border-color: var(--c-green-bd) !important;
}
/* 📣 Call next game → amber */
html.ui-v2 body .ap-call-btn {
    background: var(--c-amber-bg) !important; color: var(--c-amber) !important; border-color: var(--c-amber-bd) !important;
}
/* Players tab */
html.ui-v2 #players #save-players-btn.btn {
    background: var(--c-blue-bg) !important; color: var(--c-blue) !important; border-color: var(--c-blue-bd) !important;
}
html.ui-v2 #players #generateQRBtn.btn,
html.ui-v2 #players #getCheckinLinkBtn.btn,
html.ui-v2 #players #import-reclub-btn.btn {
    background: var(--c-teal-bg) !important; color: var(--c-teal) !important; border-color: var(--c-teal-bd) !important;
}
/* Stats tab */
html.ui-v2 body .pm-cleanup-btn {
    background: var(--c-orange-bg) !important; color: var(--c-orange) !important; border-color: var(--c-orange-bd) !important;
}
html.ui-v2 body .btn-edit-game {
    background: var(--c-blue-bg) !important; color: var(--c-blue) !important; border-color: var(--c-blue-bd) !important;
}
html.ui-v2 body .btn-delete-game {
    background: var(--c-red-bg) !important; color: var(--c-red) !important; border-color: var(--c-red-bd) !important;
}
/* Leaderboard: 🏆 This open play → amber */
html.ui-v2 #leaderboard #lb-tab-open-btn.lb-open-btn {
    background: var(--c-amber-bg) !important; color: var(--c-amber) !important; border-color: var(--c-amber-bd) !important;
}
/* Game mode choices that aren't selected: a hint of the accent on hover */
html.ui-v2 body .game-mode-pill:not(.active):hover { color: var(--v2-accent-text) !important; border-color: var(--v2-accent-ring, #8db3ec) !important; }

/* icons take the button's color */
html.ui-v2 body .btn i, html.ui-v2 body .ap-call-btn i, html.ui-v2 body .pm-cleanup-btn i { color: inherit; }

/* no movement for people who turned animations off */
@media (prefers-reduced-motion: reduce) {
    html.ui-v2 body .btn, html.ui-v2 body .ap-call-btn, html.ui-v2 body .pm-cleanup-btn, html.ui-v2 body .lb-open-btn,
    html.ui-v2 body .game-mode-pill, html.ui-v2 body .status-btn { transition: none !important; }
    html.ui-v2 body .btn:hover, html.ui-v2 body .ap-call-btn:hover, html.ui-v2 body .pm-cleanup-btn:hover,
    html.ui-v2 body .lb-open-btn:hover, html.ui-v2 body .game-mode-pill:hover, html.ui-v2 body .status-btn:hover { transform: none !important; }
}