/* The site's look.

   Dark, because this is mostly read at night and by one person at a time - a moderator scanning a
   ban list or a feedback report, not a shop front. The greens are the game's own, the same grass
   and wood the menus use, so the site and TGSC look like they came from the same place.

   Bootstrap still does the layout. This is the palette, plus the handful of places its defaults
   assume a white page: .text-dark on a dark bar is invisible, and the contextual list and alert
   variants are pale washes that vanish. Everything comes from the variables at the top, so there
   is one place to change a colour and no way for two greens to drift apart. */

:root {
  --panel: #232C24;
  --surface: #2C362D;
  --surface-hi: #394637;
  --border: #47563C;
  --ink: #F3EEDE;
  --ink-dim: #B4B7A1;
  --ink-faint: #828672;
  --grass: #7CB342;
  --grass-hi: #8FC753;
  --danger: #C85A3C;
  --amber: #E8A93A;
  --sky: #4FA3D1;
  --page: #171E18;

  /* Bootstrap reads these itself, so links, borders and focus rings follow without overriding
     every component by hand. */
  --bs-body-bg: var(--page);
  --bs-body-color: var(--ink);
  --bs-border-color: var(--border);
  --bs-link-color: var(--grass-hi);
  --bs-link-hover-color: var(--grass);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--ink-dim);
  --bs-tertiary-bg: var(--surface);
  --bs-heading-color: var(--ink);
  --bs-code-color: var(--grass-hi);
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html { font-size: 16px; }
}

body {
  margin-bottom: 60px;
  background: var(--page);
  color: var(--ink);
  font: 16px/1.6 "Segoe UI", system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6, .display-4, .display-5, .display-6 { color: var(--ink); }

a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* --- the bar across the top -------------------------------------------------------------- */

.navbar {
  background: var(--panel) !important;
  border-bottom: 2px solid var(--border) !important;
  box-shadow: none !important;
}

.navbar .navbar-brand { color: var(--ink); font-weight: 600; letter-spacing: .3px; }
.navbar .navbar-brand:hover { color: var(--grass); }

/* The template marks these text-dark, which on a dark bar is a black word on a black bar. */
.navbar .nav-link, .navbar .nav-link.text-dark {
  color: var(--ink-dim) !important;
  border-radius: 8px;
  padding: 6px 12px;
}

.navbar .nav-link:hover, .navbar .nav-link.text-dark:hover {
  color: var(--ink) !important;
  background: var(--surface);
}

.navbar-toggler {
  border-color: var(--border);
  filter: invert(1) hue-rotate(180deg) brightness(1.4);
}

/* --- panels, lists, tables ---------------------------------------------------------------- */

.card, .list-group-item, .pagination .page-link {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}

.list-group-item-action:hover { background: var(--surface-hi); color: var(--ink); }
.pagination .page-item.active .page-link { background: var(--grass); border-color: var(--grass); color: #16200F; }

/* Bootstrap's contextual variants are pale washes meant for a white page; on this one they read
   as "slightly different white". A tinted border does the same job here. */
.list-group-item-warning {
  background: rgba(232, 169, 58, .14);
  border-color: rgba(232, 169, 58, .45);
  color: var(--ink);
}

.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); color: var(--ink); }
.table > :not(caption) > * > * { border-color: var(--border); }
.table thead th { color: var(--ink-dim); font-weight: 600; }

code, .bg-light {
  background: #141A15 !important;
  color: var(--grass-hi);
  border-radius: 6px;
}

pre {
  background: #141A15;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--ink);
  overflow-x: auto;
}

pre code { background: none !important; border: 0; padding: 0; color: var(--ink); }

/* --- things you type into ----------------------------------------------------------------- */

.form-control, .form-select {
  background: #141A15;
  border-color: var(--border);
  color: var(--ink);
}

.form-control:focus, .form-select:focus {
  background: #141A15;
  border-color: var(--grass);
  color: var(--ink);
}

.form-control::placeholder { color: var(--ink-faint); }
.form-check-input { background-color: #141A15; border-color: var(--border); }
.form-check-input:checked { background-color: var(--grass); border-color: var(--grass); }

/* The template's focus ring is a white halo, which on a dark page is the flashbang in miniature. */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(124, 179, 66, .3);
}

/* --- buttons ------------------------------------------------------------------------------- */

.btn-primary { background: var(--grass); border-color: var(--grass); color: #16200F; font-weight: 600; }
.btn-primary:hover { background: var(--grass-hi); border-color: var(--grass-hi); color: #16200F; }

.btn-secondary { background: var(--surface-hi); border-color: var(--border); color: var(--ink); }
.btn-secondary:hover { background: var(--border); color: var(--ink); }

.btn-outline-secondary { border-color: var(--border); color: var(--ink-dim); }
.btn-outline-secondary:hover { background: var(--surface-hi); border-color: var(--border); color: var(--ink); }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-outline-danger { border-color: var(--danger); color: var(--danger); }
.btn-outline-danger:hover { background: var(--danger); color: #fff; }

.badge.bg-secondary { background: var(--surface-hi) !important; color: var(--ink-dim); }
.badge.bg-primary { background: var(--grass) !important; color: #16200F; }
.badge.bg-danger { background: var(--danger) !important; }

.alert-info {
  background: rgba(79, 163, 209, .12);
  border-color: rgba(79, 163, 209, .4);
  color: var(--ink);
}

.text-muted { color: var(--ink-dim) !important; }

/* --- the strip along the bottom ------------------------------------------------------------ */

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  line-height: 60px;
  background: var(--panel);
  border-top: 1px solid var(--border) !important;
  color: var(--ink-faint);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}