@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

:root {
  --rcon-bg: #252830;
  --rcon-text: #cfd2da;
  --rcon-accent: #1ca8dd;
  --rcon-card-bg: #434857;
  /* Override BS5 dark theme body background */
  --bs-body-bg: #252830;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 300;
}

a { color: var(--rcon-accent); }
a:hover { color: #fff; text-decoration: none; }

/* Console output */
#ConsoleController .Output {
  font-family: monospace;
  font-size: 12px;
  white-space: pre-wrap;
}

.scrollable { overflow: auto; }

/* Sidebar navigation */
.nav-sidebar {
  margin-top: 64px;
}

.nav-sidebar .nav-link {
  padding: 8px 20px;
  border-radius: 5px;
  color: var(--rcon-text);
}

.nav-sidebar .nav-link:hover,
.nav-sidebar .nav-link.active {
  color: #fff;
  background-color: #428bca;
}

/* Fade utility */
.fade { opacity: 0.5; }

/* Table styles */
.table > tbody > tr:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.table > thead > tr > th.sorting {
  color: #1bc98e;
  border-color: #1bc98e;
}

.table > thead > tr > th.sorting.descending {
  color: #e05d6f;
  border-color: #e05d6f;
}

.table-responsive {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* Form controls dark theme */
.form-control {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--rcon-text);
}

.form-control:focus {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-color: var(--rcon-accent);
  box-shadow: 0 0 0 0.2rem rgba(28, 168, 221, 0.25);
}

/* Cards — override BS dark-theme bg to our darker shade */
.card {
  background-color: var(--rcon-card-bg);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Dropdown dark theme */
.dropdown-menu {
  background-color: var(--rcon-card-bg);
  border-color: rgba(255, 255, 255, 0.1);
}

.dropdown-menu .dropdown-item {
  color: var(--rcon-text);
}

.dropdown-menu .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.dropdown-menu .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.15);
}

/* Navbar text color override */
.navbar-dark .navbar-text {
  color: rgba(255, 255, 255, 0.85);
}

/* Page title */
#page-title {
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Chart SVGs */
#chart-performance,
#chart-network,
#chart-players {
  display: block;
}