/* HMG brand overrides — match hostmyguild.com youplay theme look */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap");

:root {
  --hmg-bg: #080325;
  --hmg-bg-2: #0f0a3a;
  --hmg-accent: #1abc9c;
  --hmg-accent-hover: #16a085;
  --hmg-text: #ffffff;
  --hmg-muted: #a0a0c0;
}

body, html {
  background-color: var(--hmg-bg) !important;
  color: var(--hmg-text);
  font-family: "Lato", sans-serif !important;
}

/* Top nav */
.navbar {
  background-color: rgba(8, 3, 37, 0.85) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.navbar .navbar-nav .nav-link,
.navbar .nav-link {
  color: #ffffff !important;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.5px;
  font-weight: 400;
  padding: 0.5rem 0.85rem;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--hmg-accent) !important;
}

/* Outline-primary register-style button */
.btn-outline-primary {
  color: var(--hmg-accent) !important;
  border-color: var(--hmg-accent) !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 4px;
}
.btn-outline-primary:hover {
  background-color: var(--hmg-accent) !important;
  color: #080325 !important;
}

/* Primary button (Login, etc) — keep blue but match shape */
.btn-primary {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 4px;
}

/* Cards / panels — slightly lighter than bg */
.card,
.list-group-item {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--hmg-text);
}

/* Showcase banner (Welcome message at top of dashboard) */
.alert,
.alert-info {
  background-color: rgba(26, 188, 156, 0.1) !important;
  border-color: rgba(26, 188, 156, 0.4) !important;
  color: var(--hmg-text);
}
.alert a, .alert-info a {
  color: var(--hmg-accent) !important;
}

/* Sidebar list-group */
.list-group-item {
  border-radius: 0 !important;
}
.list-group-item.active {
  background-color: rgba(26, 188, 156, 0.15) !important;
  border-color: rgba(26, 188, 156, 0.4) !important;
  color: var(--hmg-text);
}

/* Footer */
footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.5rem !important;
  margin-top: 2rem;
}
footer a {
  color: var(--hmg-accent) !important;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

/* Form controls */
.form-control,
.form-select {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: var(--hmg-text) !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--hmg-accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(26, 188, 156, 0.25) !important;
}

/* Headings keep clean white */
h1, h2, h3, h4, h5, h6 {
  color: var(--hmg-text);
  font-weight: 400;
}

/* Page body wrapper */
#wrapper {
  background-color: rgba(15, 10, 58, 0.4);
  padding: 1.5rem;
  border-radius: 8px;
}

/* Match WP site logo size (160x22) */
.navbar-brand img {
  height: 22px !important;
  width: auto !important;
  max-width: 160px;
}

/* Native <option> dropdown — must set explicit dark bg + light text,
   otherwise inherits the .form-select transparent bg and renders white-on-white */
.form-select option,
select option {
  background-color: #0f0a3a !important;
  color: #ffffff !important;
}
.form-select option:checked,
.form-select option:hover,
select option:checked,
select option:hover {
  background-color: #1abc9c !important;
  color: #080325 !important;
}