/* ============================================
   AS-Stats Dark Mode — Full Override
   ============================================ */

/* --- Palette Variables (reference) ---
   bg-primary:   #0d1117
   bg-card:      #161b22
   bg-elevated:  #1c2128
   text-primary: #e6edf3
   text-secondary: #8b949e
   text-muted:   #484f58
   accent-blue:  #58a6ff
   accent-green: #3fb950
   accent-red:   #f85149
   border:       #30363d
   navbar:       #010409
*/

/* --- Base --- */
body,
html {
  background-color: #0d1117 !important;
  color: #e6edf3 !important;
}

.wrapper,
.content-wrapper,
.right-side {
  background-color: #0d1117 !important;
}

/* --- Navbar --- */
.main-header {
  background-color: #010409 !important;
  border-bottom: 1px solid #30363d !important;
}

.main-header .navbar {
  background-color: #010409 !important;
}

.main-header .navbar-brand,
.main-header .navbar-brand b {
  color: #e6edf3 !important;
}

.main-header .navbar-nav > li > a {
  color: #8b949e !important;
}

.main-header .navbar-nav > li > a:hover,
.main-header .navbar-nav > li > a:focus {
  color: #e6edf3 !important;
  background-color: #161b22 !important;
}

.main-header .navbar-nav > li.active > a,
.main-header .navbar-nav > .active > a {
  color: #e6edf3 !important;
  background-color: #1c2128 !important;
}

.navbar-toggle,
.navbar-toggle .fa {
  color: #8b949e !important;
}

/* Dropdown menus */
.dropdown-menu {
  background-color: #161b22 !important;
  border: 1px solid #30363d !important;
}

.dropdown-menu > li > a {
  color: #e6edf3 !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: #1c2128 !important;
  color: #58a6ff !important;
}

/* --- Content Header --- */
.content-header {
  background-color: transparent !important;
}

.content-header h1 {
  color: #e6edf3 !important;
}

.content-header h1 small,
.content-header h1 small i {
  color: #8b949e !important;
}

.breadcrumb {
  background-color: transparent !important;
  color: #8b949e !important;
}

.breadcrumb > li {
  color: #8b949e !important;
}

.breadcrumb > li .fa {
  color: #8b949e !important;
}

/* --- HR --- */
hr {
  border-color: #30363d !important;
}

/* --- Boxes / Cards --- */
.box {
  background-color: #161b22 !important;
  border: 1px solid #30363d !important;
  border-top: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.box-primary {
  border-top: 3px solid #58a6ff !important;
}

.box-header {
  background-color: #161b22 !important;
  border-bottom: 1px solid #30363d !important;
  color: #e6edf3 !important;
}

.box-header .box-title {
  color: #e6edf3 !important;
}

.box-header .fa {
  color: #8b949e !important;
}

.box-body {
  background-color: #161b22 !important;
  color: #e6edf3 !important;
}

.box-footer {
  background-color: #161b22 !important;
  border-top: 1px solid #30363d !important;
  color: #8b949e !important;
}

/* --- Links --- */
a {
  color: #58a6ff !important;
}

a:hover,
a:focus {
  color: #79c0ff !important;
}

/* --- Lists (Top AS, IX) --- */
.nav-stacked > li {
  border-bottom: 1px solid #30363d !important;
}

.nav-stacked > li > a {
  color: #e6edf3 !important;
  background-color: transparent !important;
}

.nav-stacked > li > a:hover {
  background-color: #1c2128 !important;
}

.li-padding {
  padding: 10px 5px;
  border-bottom: 1px solid #30363d;
}

li.even {
  background-color: #1c2128 !important;
}

/* --- Rank Badge --- */
.rank {
  font-size: 2em;
  font-weight: bold;
  color: #484f58;
  margin-top: 0.5em;
}

/* --- Forms / Inputs --- */
.form-control,
select,
input[type="text"],
input[type="number"],
input[type="search"] {
  background-color: #0d1117 !important;
  border: 1px solid #30363d !important;
  color: #e6edf3 !important;
}

.form-control:focus {
  border-color: #58a6ff !important;
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2) !important;
}

.form-control::placeholder {
  color: #484f58 !important;
}

/* --- Buttons --- */
.btn {
  background-color: #21262d !important;
  border: 1px solid #30363d !important;
  color: #e6edf3 !important;
}

.btn:hover,
.btn:focus {
  background-color: #30363d !important;
  border-color: #484f58 !important;
  color: #e6edf3 !important;
}

.btn-flat {
  background-color: #21262d !important;
  border: 1px solid #30363d !important;
  color: #e6edf3 !important;
}

.btn-flat:hover {
  background-color: #30363d !important;
}

/* --- Tables --- */
table {
  color: #e6edf3 !important;
}

th {
  background-color: #1c2128 !important;
  color: #e6edf3 !important;
  border-color: #30363d !important;
}

td {
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #161b22 !important;
}

.table-striped > tbody > tr:nth-of-type(even) {
  background-color: #1c2128 !important;
}

.table-hover > tbody > tr:hover {
  background-color: #1c2128 !important;
}

/* --- List Group (history.php links) --- */
.list-group-item {
  background-color: #161b22 !important;
  border: 1px solid #30363d !important;
  color: #e6edf3 !important;
}

.list-group-item:hover,
.list-group-item:focus {
  background-color: #1c2128 !important;
  color: #58a6ff !important;
}

.list-group {
  margin-bottom: 0px !important;
}

/* --- Footer --- */
.main-footer {
  background-color: #010409 !important;
  border-top: 1px solid #30363d !important;
  color: #8b949e !important;
}

.main-footer a {
  color: #58a6ff !important;
}

/* --- Checkbox area (link filter) --- */
.checkbox label,
label {
  color: #e6edf3 !important;
}

/* --- Panels (if any) --- */
.panel {
  background-color: #161b22 !important;
  border-color: #30363d !important;
}

.panel-heading {
  background-color: #1c2128 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

.panel-body {
  background-color: #161b22 !important;
  color: #e6edf3 !important;
}

/* --- Misc --- */
pre {
  background-color: #161b22 !important;
  border: 1px solid #30363d !important;
  color: #e6edf3 !important;
  margin: 70px 20px 15px 80px !important;
}

.well {
  background-color: #161b22 !important;
  border: 1px solid #30363d !important;
  color: #e6edf3 !important;
}

.jumbotron {
  background-color: #161b22 !important;
  color: #e6edf3 !important;
}

/* Search box spinner */
.searchBox {
  background-image: url('../images/ajax-loader.gif');
  background-repeat: no-repeat;
  background-position: center;
}

/* Menu input overrides */
.menu-input {
  border-top-left-radius: 3px !important;
  border-bottom-left-radius: 3px !important;
}

.button-input {
  border-top-right-radius: 3px !important;
  border-bottom-right-radius: 3px !important;
}

/* Graph images - ensure no white border artifacts */
img.img-responsive {
  border-radius: 4px;
}

/* Row alternation for AS list items */
.row {
  color: #e6edf3 !important;
}

/* Skin overrides for skin-black-light specifics */
.skin-black-light .main-header .navbar {
  background-color: #010409 !important;
}

.skin-black-light .main-header .logo {
  background-color: #010409 !important;
  border-right: 1px solid #30363d !important;
}

.skin-black-light .main-header .navbar .nav > li > a {
  color: #8b949e !important;
}

.skin-black-light .main-header .navbar .nav > li > a:hover {
  color: #e6edf3 !important;
  background-color: #161b22 !important;
}

.skin-black-light .content-wrapper {
  background-color: #0d1117 !important;
}

.skin-black-light .main-footer {
  background-color: #010409 !important;
  border-top: 1px solid #30363d !important;
  color: #8b949e !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0d1117;
}

::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #484f58;
}

/* Selection styling */
::selection {
  background: #264f78;
  color: #e6edf3;
}

/* ============================================
   Animations & JS-driven enhancements
   ============================================ */

/* --- Smooth transitions on interactive elements --- */
.box {
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.2s ease !important;
}

.box:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  border-color: #484f58 !important;
}

.box-focused {
  border-color: #58a6ff !important;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15), 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* AS list item hover */
.li-padding {
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

.li-padding:hover {
  background-color: #1c2128 !important;
  transform: translateX(4px);
  box-shadow: -3px 0 0 0 #58a6ff;
}

/* Rank hover pulse */
.rank {
  transition: color 0.3s ease, transform 0.3s ease !important;
}

.rank-hover,
.li-padding:hover .rank {
  color: #58a6ff !important;
  transform: scale(1.1);
}

/* --- Navbar active indicator --- */
.nav-indicator {
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #58a6ff, transparent);
  border-radius: 2px;
  animation: navGlow 2s ease-in-out infinite;
}

.navbar-nav > li {
  position: relative;
}

@keyframes navGlow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Navbar link transition */
.navbar-nav > li > a {
  transition: color 0.2s ease, background-color 0.2s ease !important;
}

/* --- Graph skeleton loading --- */
.graph-skeleton {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 150px;
  background: linear-gradient(90deg, #161b22 25%, #1c2128 50%, #161b22 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Graph image hover */
img[src*="gengraph.php"],
img[src*="linkgraph.php"] {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  border-radius: 4px;
}

img[src*="gengraph.php"]:hover,
img[src*="linkgraph.php"]:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* --- Fullscreen graph overlay --- */
#graph-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(1, 4, 9, 0.92);
  z-index: 99999;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#graph-overlay.active {
  display: flex;
  opacity: 1;
}

#graph-overlay img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  border: 1px solid #30363d;
}

#graph-overlay .overlay-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #8b949e;
  font-size: 24px;
  cursor: pointer;
  transition: color 0.2s ease;
  z-index: 100000;
}

#graph-overlay .overlay-close:hover {
  color: #e6edf3;
}

/* --- Auto-refresh countdown badge --- */
#refresh-countdown {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: #161b22;
  border: 1px solid #30363d;
  color: #8b949e;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-family: monospace;
  z-index: 9999;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

#refresh-countdown .fa {
  margin-right: 4px;
}

#refresh-countdown.refresh-soon {
  color: #58a6ff;
  border-color: #58a6ff;
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
  50% { box-shadow: 0 2px 16px rgba(88, 166, 255, 0.3); }
}

/* --- Back to top button --- */
#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: #161b22;
  border: 1px solid #30363d;
  color: #8b949e;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  z-index: 9999;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease, color 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  outline: none;
}

#back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}

#back-to-top:hover {
  background: #21262d;
  color: #58a6ff;
  border-color: #58a6ff;
}

/* --- Counter animation styling --- */
.counter-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #e6edf3;
}

/* --- Footer time --- */
.footer-time {
  color: #484f58;
}

.footer-time .fa {
  color: #484f58 !important;
}

/* --- Dropdown animation --- */
.dropdown-menu {
  animation: dropdownFade 0.2s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

@keyframes dropdownFade {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Form control select dark --- */
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 30px !important;
}

/* --- Flag images slight glow --- */
img[src*="flags/"] {
  border-radius: 2px;
  vertical-align: middle;
}

/* --- Legend color blocks dark border fix --- */
td[style*="border: 4px solid #fff"] {
  border-color: #30363d !important;
}

/* Legend table borders */
.box-body table.small td {
  border-color: #30363d !important;
}