/* =======================
   DARK MODE THEME - Production Ready
   Complete dark theme for BetPro Exchange UI
======================= */
:root {
  /* Dark Mode Color Palette */
  --dm-bg-darkest: #0a0f1c;
  --dm-bg-darker: #121826;
  --dm-bg-dark: #1a2036;
  --dm-bg-surface: #222a44;
  --dm-bg-light: #2b3552;
  --dm-border: #3a4668;
  --dm-text-primary: #f0f4ff;
  --dm-text-secondary: #c1c9e0;
  --dm-text-tertiary: #8c96b3;
  --dm-primary: #4a86e8;
  --dm-primary-hover: #5d9aff;
  --dm-danger: #ff5c77;
  --dm-success: #4de0a3;
  --dm-warning: #ffc55c;
  --dm-info: #5cc8ff;
  --dm-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  --dm-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === BASE DARK MODE === */
body.dark-mode {
  background-color: var(--dm-bg-darker);
  color: var(--dm-text-primary);
  transition: var(--dm-transition);
}

/* === TEXT & LINKS === */
body.dark-mode,
body.dark-mode p {
  color: var(--dm-text-primary);
}

body.dark-mode a {
  color: var(--dm-primary);
}

body.dark-mode a:hover {
  color: var(--dm-primary-hover);
}

/* === NAVBAR & FOOTER === */
body.dark-mode .navbar,
body.dark-mode .footer {
  background-color: var(--dm-bg-darkest);
  border-bottom: 1px solid var(--dm-border);
}

body.dark-mode .nav-links a {
  color: var(--dm-text-primary);
}

body.dark-mode .nav-links a:hover {
  color: var(--dm-primary);
}

/* === FORM ELEMENTS === */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .form-control {
  background-color: var(--dm-bg-surface);
  color: var(--dm-text-primary);
  border: 1px solid var(--dm-border);
  transition: var(--dm-transition);
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
  border-color: var(--dm-primary);
  box-shadow: 0 0 0 3px rgba(74, 134, 232, 0.15);
}

body.dark-mode .form-label {
  color: var(--dm-text-secondary);
}

/* === BUTTONS === */
body.dark-mode .btn,
body.dark-mode .account-btn {
  background-color: var(--dm-bg-surface);
  color: var(--dm-text-primary);
  border: 1px solid var(--dm-border);
  transition: var(--dm-transition);
}

body.dark-mode .btn-primary,
body.dark-mode .place-bet-btn,
body.dark-mode .account-btn:not(.danger) {
  background-color: var(--dm-primary);
  color: white;
  border-color: #3a70c7;
}

body.dark-mode .btn-primary:hover,
body.dark-mode .place-bet-btn:hover,
body.dark-mode .account-btn:not(.danger):hover {
  background-color: var(--dm-primary-hover);
}

body.dark-mode .account-btn.danger {
  background-color: var(--dm-danger);
  color: white;
}

body.dark-mode .btn-danger {
  background-color: var(--dm-danger);
  color: white;
}

body.dark-mode .btn-success {
  background-color: var(--dm-success);
  color: #0a3527;
}

/* === ODDS & MARKET COMPONENTS === */
body.dark-mode .odds-tile {
  background-color: var(--dm-bg-dark);
  color: var(--dm-text-primary);
  border: 1px solid var(--dm-border);
  box-shadow: var(--dm-card-shadow);
}

body.dark-mode .back-odds {
  background-color: rgba(74, 134, 232, 0.15);
  color: var(--dm-primary);
}

body.dark-mode .lay-odds {
  background-color: rgba(255, 92, 119, 0.15);
  color: var(--dm-danger);
}

body.dark-mode .odds-up {
  background-color: rgba(77, 224, 163, 0.2) !important;
}

body.dark-mode .odds-down {
  background-color: rgba(255, 92, 119, 0.2) !important;
}

body.dark-mode .market-tile,
body.dark-mode .bet-card {
  background-color: var(--dm-bg-dark);
  border: 1px solid var(--dm-border);
}

/* === TABLES === */
body.dark-mode .table {
  color: var(--dm-text-primary);
}

body.dark-mode .table th {
  background-color: var(--dm-bg-darkest);
  color: var(--dm-text-secondary);
}

body.dark-mode .table td {
  background-color: var(--dm-bg-dark);
  border-color: var(--dm-border);
}

body.dark-mode .table-striped tr:nth-child(even) {
  background-color: var(--dm-bg-surface);
}

body.dark-mode .table-hover tbody tr:hover {
  background-color: var(--dm-bg-light);
}

/* === ALERTS & BANNERS === */
body.dark-mode .alert-banner {
  background-color: var(--dm-bg-surface);
  border: 1px solid var(--dm-border);
  color: var(--dm-text-primary);
}

body.dark-mode .alert-banner.info {
  background-color: rgba(92, 200, 255, 0.15);
  color: var(--dm-info);
}

body.dark-mode .alert-banner.warning {
  background-color: rgba(255, 197, 92, 0.15);
  color: var(--dm-warning);
}

body.dark-mode .alert-banner.error {
  background-color: rgba(255, 92, 119, 0.15);
  color: var(--dm-danger);
}

body.dark-mode .alert-banner.success {
  background-color: rgba(77, 224, 163, 0.15);
  color: var(--dm-success);
}

body.dark-mode .live-status-bar {
  background-color: rgba(255, 197, 92, 0.2);
  color: var(--dm-warning);
}

/* === CARDS & PANELS === */
body.dark-mode .card,
body.dark-mode .form-card,
body.dark-mode .account-info,
body.dark-mode .announcement-widget,
body.dark-mode .chat-widget {
  background-color: var(--dm-bg-dark);
  border: 1px solid var(--dm-border);
  box-shadow: var(--dm-card-shadow);
}

body.dark-mode .balance-box {
  background-color: var(--dm-bg-surface);
  border: 1px solid var(--dm-border);
}

/* === TABS === */
body.dark-mode .market-tabs .tab {
  background-color: var(--dm-bg-surface);
  color: var(--dm-text-secondary);
  border: 1px solid var(--dm-border);
}

body.dark-mode .market-tabs .tab.active {
  background-color: var(--dm-primary);
  color: white;
  border-color: var(--dm-primary);
}

/* === BETSLIP === */
body.dark-mode #betslip-preview {
  background-color: var(--dm-bg-dark);
  border: 1px solid var(--dm-border);
  box-shadow: var(--dm-card-shadow);
}

body.dark-mode .betslip-header {
  background-color: var(--dm-bg-darkest);
}

body.dark-mode .betslip-item {
  border-color: var(--dm-border);
}

body.dark-mode .betslip-actions {
  background-color: var(--dm-bg-surface);
  border-color: var(--dm-border);
}

/* === CHAT WIDGET === */
body.dark-mode .chat-widget {
  background-color: var(--dm-bg-dark);
  border: 1px solid var(--dm-border);
}

body.dark-mode .chat-header {
  background-color: var(--dm-primary);
}

body.dark-mode .chat-form {
  background-color: var(--dm-bg-surface);
  border-color: var(--dm-border);
}

body.dark-mode .chat-input {
  background-color: var(--dm-bg-dark);
  color: var(--dm-text-primary);
  border-color: var(--dm-border);
}

body.dark-mode .bot-msg {
  background-color: var(--dm-bg-surface);
  color: var(--dm-text-primary);
}

body.dark-mode .user-msg {
  background-color: var(--dm-primary);
  color: white;
}

/* === LOADER === */
body.dark-mode .loader {
  background-color: rgba(10, 15, 28, 0.9);
}

body.dark-mode .loader .spinner {
  border-color: var(--dm-bg-surface);
  border-top-color: var(--dm-primary);
}

/* === UTILITY CLASSES === */
body.dark-mode .text-muted {
  color: var(--dm-text-tertiary) !important;
}

/* === ANIMATIONS === */
body.dark-mode *,
body.dark-mode .navbar,
body.dark-mode .footer,
body.dark-mode .odds-tile,
body.dark-mode .market-tile,
body.dark-mode .card,
body.dark-mode .betslip-panel,
body.dark-mode .alert-banner {
  transition: var(--dm-transition);
}

/* === SCROLLBARS === */
body.dark-mode ::-webkit-scrollbar {
  width: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
  background: var(--dm-bg-surface);
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--dm-border);
  border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--dm-primary);
}