/* assets/css/goldgoblin-theme.css */

:root {
  --gg-bg: #202020;
  --gg-surface: #2a2a2a;
  --gg-surface-2: #232323;

  --gg-text-soft: #cecece;
  --gg-text-muted: #a8a9ad;
  --gg-text-modal: #dee2e6;

  --gg-gold: #daa205;
  --gg-gold-hover: #c08d04;
  --gg-hover: #cdcdcd;
  --gg-gold-soft: rgba(218, 162, 5, 0.18);

  --gg-border: #3f4045;
  --gg-twitch: #a970ff;
  --gg-discord: #5865f2;
}

html,
body {
  background-color: var(--gg-bg);
}

/* GoldGoblin branding */
header .bi-gift,
header h1,
footer a[href*="impressum"],
footer a[href*="datenschutz"],
a[href*="goldgoblin.net/livestream"] {
  color: var(--gg-gold);
}

footer a[href*="impressum"]:hover,
footer a[href*="datenschutz"]:hover,
a[href*="goldgoblin.net/livestream"]:hover {
  color: var(--gg-hover);
}

/* golden lines */
header.border-bottom,
footer.border-top {
  border-color: var(--gg-gold) !important;
}

/* links */
a {
  color: var(--gg-gold);
}

a:hover {
  color: var(--gg-hover);
}

/* special links */
#stream-live-link {
  color: var(--gg-twitch) !important;
}

#stream-live-link:hover {
  color: var(--gg-hover) !important;
}

a[href*="discord.gg"] {
  color: var(--gg-discord) !important;
}

a[href*="discord.gg"]:hover {
  color: var(--gg-hover) !important;
}

/* ui areas */
.card,
.modal-content,
.alert {
  background-color: var(--gg-surface);
  border: 1px solid var(--gg-border);
}

.card-header,
.modal-header,
.modal-footer {
  background-color: var(--gg-surface-2);
  border-color: var(--gg-border);
}

.card .card.card-body,
.collapse .card.card-body {
  background-color: var(--gg-surface-2);
  color: var(--gg-text-soft);
  border: 1px solid var(--gg-border);
}

/* table */
.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--gg-border);
  --bs-table-hover-bg: rgb(56, 56, 56, 0.4);
}

.table thead th {
  color: var(--gg-text-modal);
  border-bottom-color: var(--gg-border);
}

.table tbody td,
.table tbody th {
  color: var(--gg-text-soft);
}

/* Inputs */
.form-control,
.form-select,
textarea {
  background-color: var(--gg-surface-2);
  border: 1px solid var(--gg-border);
}

.form-control::placeholder,
textarea::placeholder {
  color: var(--gg-text-muted);
}

.form-control:focus,
.form-select:focus,
textarea:focus {
  background-color: var(--gg-surface-2);
  border-color: var(--gg-gold);
  box-shadow: 0 0 0 0.2rem var(--gg-gold-soft);
}

.btn-link:hover,
.btn-link:focus {
  color: var(--gg-gold);
}

/* seach button golden */
#searchBtn {
  color: var(--gg-gold);
  border-color: var(--gg-gold);
}

#searchBtn:hover,
#searchBtn:focus,
#searchBtn:active,
#searchBtn.active,
.show > #searchBtn.dropdown-toggle {
  color: #212529 !important;
  background-color: var(--gg-gold) !important;
  border-color: var(--gg-gold) !important;
  box-shadow: 0 0 0 0.2rem var(--gg-gold-soft) !important;
}

/* clear button */
#clearSearchBtn {
  background-color: var(--gg-surface-2);
  border-color: var(--gg-border);
}