/* Common styles for both themes */
.datatable-container {
  width: 100%;
  margin: 0 auto;
}

.datatable {
  width: 100%;
  border-collapse: collapse;
}

.datatable th,
.datatable td {
  padding: 5px;
  border: 0.5px solid #ccc;
}
  
table.dataTable {
  width: 100%;
  padding-top: 10px;
  clear: both;
  border-collapse: separate;
  border-spacing: 1;
  font-size: inherit;
}

/* Dark theme styles */
@media (prefers-color-scheme: dark) {
  .dataTables_wrapper .dataTables_info {
    color: #fff;
  }
  .dataTables_wrapper .dataTables_length, 
  .dataTables_wrapper .dataTables_filter, 
  .dataTables_wrapper .dataTables_info, 
  .dataTables_wrapper .dataTables_processing, 
  .dataTables_wrapper .dataTables_paginate {
    color: #fff;
  }

  .datatable th,
  .datatable td {
    background-color: #202020;
    color: white;
    border: 0.5px solid #363636;
  }

  .dataTables_wrapper .dataTables_length select {
    border: 1px solid #fff;
    border-radius: 3px;
    padding: 5px;
    background-color: transparent;
    color: #fff;
  }
  
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, 
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    cursor: default;
    color: #fff !important;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
  }
  
  .dataTables_wrapper .dataTables_paginate .paginate_button.current, 
  .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #333 !important;
    background-color: white;
    border-radius: 10px;
  }
  
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: white !important;
    background-color: #333 !important;
    border-radius: 10px;
  }
}

/* Light theme styles */
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
  body {
    background-color: #f9f9f9;
    color: #333333;
  }

  .datatable th,
  .datatable td {
    border-color: #ccc;
  }
  
  .dataTables_wrapper .dataTables_paginate .paginate_button.current, 
  .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #333 !important;
    background-color: white;
    border-radius: 10px;
  }
  
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: black !important;
    background-color: #f6f6f6 !important;
    border-radius: 10px;
  }
}

/* Chart container styling */
.chart-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* Blinking text styles */
.blink-text {
  animation: blink 1s infinite;
  color: yellow;
  text-shadow: 4px 4px 4px rgb(255, 11, 11);
  font-size: medium;
  font-weight: 600;
}

.blink-textinv {
  animation: blink 1s infinite;
  color: rgb(255, 11, 11);
  font-size: medium;
  font-weight: 600;
}

@keyframes blink {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

/* Background colors for top three ranks */
.gold-bg {
  background-color: gold;
}

.silver-bg {
  background-color: silver;
}

.bronze-bg {
  background-color: bronze;
}

/* Mobile-specific styling for table expand button */
@media screen and (max-width: 640px) {
  .dataTable tr td:first-child::before {
      content: "+";
      font-size: 16px;
      color: #007bff;
      cursor: pointer;
      float: left;
      margin-top: 2px;
      margin-right: 8px;
  }
}

/* Dropdown submenu styling */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 10%;
  left: 100%;
  margin-top: -1px;
}

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

/* Font and blackout overlay styles */
body {
  font-family: 'Reddit Sans Condensed', sans-serif;
}

#overlay {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.8);
  z-index: 2;
  cursor: pointer;
}

/* Disable link interaction */
a.disabled {
  pointer-events: none;
  cursor: default;
}

/* Style to blackout the screen */
.blackout {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1000;
}

/* Navbar brand alignment */
.navbar-brand .logo-container {
  display: flex;
  align-items: center;
}

.logo {
  height: 80px !important;
  margin-right: 8px;
}