/* ============================================
   BOT CHALLENGE ARENA - H13CRYPTO
   ============================================ */

#botChallengeArena {
  scroll-margin-top: 120px;
  color: #ffffff !important;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 15px;
  width: 100%;
}

#botChallengeArena * {
  color: #ffffff !important;
}

#botChallengeArena .text-muted {
  color: #aaaaaa !important;
}

#botChallengeArena .text-success {
  color: #22c55e !important;
}

#botChallengeArena .text-danger {
  color: #ef4444 !important;
}

#botChallengeArena .text-warning {
  color: #f59e0b !important;
}

#botChallengeArena .text-info {
  color: #3b82f6 !important;
}

#botChallengeArena .card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-radius: 16px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
}

#botChallengeArena .card-body {
  color: #ffffff !important;
  padding: 15px !important;
}

.coin-tag {
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  border: 2px solid transparent;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 0.85rem !important;
  display: inline-block !important;
  margin: 3px !important;
}

.coin-tag:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.2) !important;
}

.coin-tag.selected {
  border-color: #22c55e !important;
  background: rgba(34, 197, 94, 0.3) !important;
}

#leaderboardTable {
  color: #ffffff !important;
  width: 100% !important;
  font-size: 0.85rem !important;
}

#leaderboardTable thead th {
  color: #aaaaaa !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 8px !important;
}

#leaderboardTable tbody tr {
  cursor: pointer;
  transition: all 0.2s ease;
  color: #ffffff !important;
}

#leaderboardTable tbody tr:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

#leaderboardTable tbody td {
  padding: 10px 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#botCreationForm .form-control,
#botCreationForm .form-select {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  width: 100% !important;
}

#botCreationForm .form-control::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

#botCreationForm .form-control:focus,
#botCreationForm .form-select:focus {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.25);
}

#botCreationForm .form-label {
  color: #cccccc !important;
  margin-bottom: 5px !important;
}

#botChallengeArena .btn {
  color: #ffffff !important;
  padding: 10px 24px !important;
  border-radius: 30px !important;
}

#botChallengeArena .btn-success {
  background: #22c55e !important;
  border-color: #22c55e !important;
}

#botChallengeArena .btn-success:hover {
  background: #15803d !important;
  border-color: #15803d !important;
}

#botChallengeArena .btn-outline-secondary {
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

#botChallengeArena .badge {
  color: #ffffff !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
}

#botChallengeArena .badge.bg-primary {
  background: rgba(59, 130, 246, 0.3) !important;
}

#botChallengeArena .badge.bg-warning {
  background: rgba(245, 158, 11, 0.3) !important;
  color: #f59e0b !important;
}

#botChallengeArena .badge.bg-success {
  background: rgba(34, 197, 94, 0.3) !important;
}

#botChallengeArena .badge.bg-danger {
  background: rgba(239, 68, 68, 0.3) !important;
}

#botChallengeArena .badge.bg-info {
  background: rgba(59, 130, 246, 0.3) !important;
}

#botDetailModal .modal-content,
#strategyGuideModal .modal-content {
  background: #1a1a2e !important;
  color: #ffffff !important;
  border-radius: 16px !important;
}

#myBotStatus {
  padding: 20px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

@media (max-width: 768px) {
  #botChallengeArena {
    padding: 10px 10px !important;
  }
  
  #botChallengeArena .card {
    padding: 12px !important;
  }
  
  #botChallengeArena .hero-title {
    font-size: 1.4rem !important;
    text-align: center !important;
  }
  
  #botChallengeArena .btn {
    width: 100% !important;
    margin-bottom: 6px !important;
  }
  
  #leaderboardTable {
    font-size: 0.7rem !important;
  }
  
  #leaderboardTable th:nth-child(6),
  #leaderboardTable td:nth-child(6) {
    display: none !important;
  }
  
  #leaderboardTable th:nth-child(7),
  #leaderboardTable td:nth-child(7) {
    display: none !important;
  }
}

/* ===== STRATEGY GUIDE MODAL - WHITE TEXT ===== */
#strategyGuideModal .modal-body * {
  color: #ffffff !important;
}

#strategyGuideModal .modal-body .text-muted {
  color: #aaaaaa !important;
}

#strategyGuideModal .modal-body .card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#strategyGuideModal .modal-body .card-body {
  color: #ffffff !important;
}

#strategyGuideModal .modal-body h6 {
  color: #ffffff !important;
}

#strategyGuideModal .modal-body p {
  color: #dddddd !important;
}

#strategyGuideModal .modal-body .badge {
  color: #ffffff !important;
}

#strategyGuideModal .modal-body .badge.bg-danger {
  background-color: #dc3545 !important;
}

#strategyGuideModal .modal-body .badge.bg-warning {
  background-color: #f59e0b !important;
  color: #000000 !important;
}

#strategyGuideModal .modal-body .badge.bg-success {
  background-color: #22c55e !important;
}

#strategyGuideModal .modal-body .badge.bg-info {
  background-color: #3b82f6 !important;
}

#strategyGuideModal .modal-footer .btn {
  color: #ffffff !important;
}

#strategyGuideModal .modal-footer .btn-secondary {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

#strategyGuideModal .modal-footer .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* ===== DESKTOP FIX - Keep content inside page ===== */
@media (min-width: 992px) {
  #botChallengeArena {
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 30px 20px !important;
  }

  #botChallengeArena .container-fluid,
  #botChallengeArena .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #botChallengeArena .row {
    margin-left: -12px !important;
    margin-right: -12px !important;
  }

  #botChallengeArena .row > * {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #botChallengeArena .card {
    padding: 24px !important;
  }

  #botChallengeArena .card-body {
    padding: 20px !important;
  }
}

/* ===== LARGE DESKTOP FIX ===== */
@media (min-width: 1400px) {
  #botChallengeArena {
    max-width: 1320px !important;
    padding: 40px 30px !important;
  }
}

/* ===== ALL TEXT WHITE ON DESKTOP ===== */
#botChallengeArena,
#botChallengeArena * {
  color: #ffffff !important;
}

#botChallengeArena .text-muted {
  color: #aaaaaa !important;
}

#botChallengeArena .text-success {
  color: #22c55e !important;
}

#botChallengeArena .text-danger {
  color: #ef4444 !important;
}

#botChallengeArena .text-warning {
  color: #f59e0b !important;
}

#botChallengeArena .text-info {
  color: #3b82f6 !important;
}

/* ===== STRATEGY GUIDE MODAL - FORCE WHITE TEXT ===== */
#strategyGuideModal,
#strategyGuideModal * {
  color: #ffffff !important;
}

#strategyGuideModal .text-muted {
  color: #aaaaaa !important;
}

#strategyGuideModal .modal-body p,
#strategyGuideModal .modal-body h6,
#strategyGuideModal .modal-body span,
#strategyGuideModal .modal-body div {
  color: #ffffff !important;
}

#strategyGuideModal .card {
  background: rgba(255, 255, 255, 0.05) !important;
}

#strategyGuideModal .badge.bg-warning {
  color: #000000 !important;
}

#strategyGuideModal .btn-secondary {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* ===== STRATEGY GUIDE - FIX POSITION ===== */
#strategyGuideModal .modal-dialog {
  max-width: 800px !important;
  margin: 1.75rem auto !important;
}

#strategyGuideModal .modal-content {
  max-width: 100% !important;
  overflow: hidden !important;
}

#strategyGuideModal .modal-body {
  max-height: 70vh !important;
  overflow-y: auto !important;
}

/* Desktop fix - keep inside page */
@media (min-width: 992px) {
  #strategyGuideModal .modal-dialog {
    max-width: 800px !important;
  }
}

/* Mobile fix */
@media (max-width: 768px) {
  #strategyGuideModal .modal-dialog {
    margin: 10px !important;
    max-width: 100% !important;
  }
  #strategyGuideModal .modal-body {
    padding: 15px !important;
  }
}

/* ===== MARKET OVERVIEW - TRANSPARENT BACKGROUND ===== */
.container {
  background: transparent !important;
}

.container.mt-5.pt-5 {
  background: transparent !important;
}

/* Make all inner containers transparent too */
.container .table-wrap,
.container .stats-bar,
.container .filter-pills,
.container .market-tabs {
  background: transparent !important;
}

/* Keep the table wrap with slight transparency */
.table-wrap {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Stats bar with slight transparency */
.stats-bar {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Make mobile cards transparent */
.coin-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ===== TABLE BODY - TRANSPARENT BACKGROUND ===== */
#tableBody {
  background: transparent !important;
}

#tableBody tr {
  background: transparent !important;
}

#tableBody td {
  background: transparent !important;
}

#tableBody .loading-spinner {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Keep the table wrap semi-transparent */
.table-wrap {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Table header stays subtle */
.table-wrap .table th {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* ===== TABLE BODY - TRANSPARENT BACKGROUND ===== */
#tableBody {
  background: #468faf;
}

#tableBody tr {
  background: transparent !important;
}

#tableBody td {
  background: transparent !important;
}

#tableBody .loading-spinner {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Keep the table wrap semi-transparent */
.table-wrap {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Table header stays subtle */
.table-wrap .table th {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* ===== FORCE WHITE TEXT ON MARKET TABLE ===== */
#marketTable,
#marketTable * {
  color: #ffffff !important;
}

#marketTable td,
#marketTable th,
#marketTable span,
#marketTable strong,
#marketTable .coin-name,
#marketTable .coin-symbol,
#marketTable .price,
#marketTable .change,
#marketTable .volume {
  color: #ffffff !important;
}

/* Keep the muted text slightly dimmer */
#marketTable .text-muted {
  color: #aaaaaa !important;
}

/* Keep price colors */
#marketTable .price-up {
  color: #22c55e !important;
}

#marketTable .price-down {
  color: #ef4444 !important;
}

/* Fix dropdown */
#marketTable .change-dropdown {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

#marketTable .change-dropdown option {
  color: #ffffff !important;
  background: #1a1a2e !important;
}

/* Fix sparkline tooltip */
#marketTable .spark-tooltip {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* ===== COIN TAGS - BETTER VISIBILITY ===== */
.coin-tag {
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  border: 2px solid transparent;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 0.8rem !important;
  display: inline-block !important;
  margin: 3px !important;
}

.coin-tag:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.15) !important;
}

.coin-tag.selected {
  border-color: #22c55e !important;
  background: rgba(34, 197, 94, 0.25) !important;
}

.coin-tag.border-success {
  border-color: #22c55e !important;
  background: rgba(34, 197, 94, 0.2) !important;
}