/* ==========================================================================
   Laguna Games — site.css. The ONLY hand-written stylesheet (01-conventions).
   Sections: fonts / tokens / Bootstrap variable overrides / components / errors.
   No SASS. Override Bootstrap via its CSS variables only.
   ========================================================================== */

/* --- Rubik (vendored, cyrillic+latin subsets) --- */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/rubik/rubik-400.a557ab58cf8b.woff2") format("woff2");
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/fonts/rubik/rubik-500.6751d6fe8ab5.woff2") format("woff2");
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../vendor/fonts/rubik/rubik-700.bcec09303ec8.woff2") format("woff2");
}

/* --- Design tokens --- */
:root {
  --lg-accent: #2bd9c7;
  --lg-accent-rgb: 43, 217, 199;
  --lg-accent-hover: #21b3a5;
  --lg-accent-hover-rgb: 33, 179, 165;
  --lg-bg: #0f1519;
  --lg-surface: #161d23;
}

/* --- Bootstrap dark-theme overrides (site.css loads AFTER bootstrap.min.css) --- */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--lg-bg);
  --bs-body-font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --bs-primary: var(--lg-accent);
  --bs-primary-rgb: var(--lg-accent-rgb);
  --bs-link-color: var(--lg-accent);
  --bs-link-color-rgb: var(--lg-accent-rgb);
  --bs-link-hover-color: var(--lg-accent-hover);
  --bs-link-hover-color-rgb: var(--lg-accent-hover-rgb);
  --bs-tertiary-bg: var(--lg-surface);
  --bs-focus-ring-color: rgba(var(--lg-accent-rgb), 0.25);
}

/* Buttons: .btn-primary does NOT follow --bs-primary at runtime; override its own vars.
   Teal is light — use dark text for contrast, never white. */
.btn-primary {
  --bs-btn-bg: var(--lg-accent);
  --bs-btn-border-color: var(--lg-accent);
  --bs-btn-color: var(--lg-bg);
  --bs-btn-hover-bg: var(--lg-accent-hover);
  --bs-btn-hover-border-color: var(--lg-accent-hover);
  --bs-btn-hover-color: var(--lg-bg);
  --bs-btn-active-bg: var(--lg-accent-hover);
  --bs-btn-active-border-color: var(--lg-accent-hover);
  --bs-btn-active-color: var(--lg-bg);
  --bs-btn-disabled-bg: var(--lg-accent);
  --bs-btn-disabled-border-color: var(--lg-accent);
  --bs-btn-disabled-color: var(--lg-bg);
  --bs-btn-focus-shadow-rgb: var(--lg-accent-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--lg-accent);
  --bs-btn-border-color: var(--lg-accent);
  --bs-btn-hover-bg: var(--lg-accent);
  --bs-btn-hover-border-color: var(--lg-accent);
  --bs-btn-hover-color: var(--lg-bg);
  --bs-btn-active-bg: var(--lg-accent);
  --bs-btn-active-border-color: var(--lg-accent);
  --bs-btn-active-color: var(--lg-bg);
  --bs-btn-focus-shadow-rgb: var(--lg-accent-rgb);
}

/* Form focus (Bootstrap compiles these colors; vars alone don't reach them) */
.form-control:focus,
.form-select:focus {
  border-color: var(--lg-accent);
  box-shadow: 0 0 0 0.25rem rgba(var(--lg-accent-rgb), 0.25);
}

/* Pagination (used by news list from M3) */
.pagination {
  --bs-pagination-color: var(--lg-accent);
  --bs-pagination-hover-color: var(--lg-accent-hover);
  --bs-pagination-active-bg: var(--lg-accent);
  --bs-pagination-active-border-color: var(--lg-accent);
  --bs-pagination-active-color: var(--lg-bg);
}

/* Surfaces */
.card {
  --bs-card-bg: var(--lg-surface);
}
.dropdown-menu {
  --bs-dropdown-bg: var(--lg-surface);
}
.navbar .nav-link.active {
  color: var(--lg-accent);
}

/* News list cover thumbnail (no server-side thumbnails in v1 — 13-news.md §5.7) */
.news-cover {
  height: 240px;
  object-fit: cover;
}

/* Home hero: subtle dark gradient tinted with the accent */
.hero {
  background: linear-gradient(180deg, rgba(var(--lg-accent-rgb), 0.08) 0%, var(--lg-bg) 100%);
  border: 1px solid var(--lg-surface);
  border-radius: 0.5rem;
  padding: 3rem 1.5rem;
}

/* Auth / profile forms render via {{ form.as_div }} (no widget-tweaks dep);
   style the bare controls to Bootstrap's .form-control look (12-accounts.md). */
.form-styled input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-styled textarea,
.form-styled select {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  color: var(--bs-body-color);
  background-color: var(--lg-surface);
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 0.375rem;
}
.form-styled input:focus,
.form-styled textarea:focus,
.form-styled select:focus {
  border-color: var(--lg-accent);
  box-shadow: 0 0 0 0.25rem rgba(var(--lg-accent-rgb), 0.25);
  outline: 0;
}
.form-styled > div {
  margin-bottom: 1rem;
}
.form-styled label {
  margin-bottom: 0.25rem;
  font-weight: 500;
}
.form-styled input[type="file"] {
  color: var(--bs-body-color);
}
.form-styled .helptext {
  display: block;
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
  margin-top: 0.25rem;
}
.form-styled ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.form-styled .errorlist {
  color: #ea868f;
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* Avatar (12-accounts.md): stored file is exactly 256x256; the empty-state
   placeholder reuses the vendored bi-person-circle glyph at the same box. */
.avatar {
  width: 256px;
  height: 256px;
  border-radius: 0.5rem;
  object-fit: cover;
}
.avatar-placeholder {
  width: 256px;
  height: 256px;
  font-size: 256px;
  line-height: 1;
  color: var(--bs-secondary-color);
}

/* Error pages (500.html is standalone and relies ONLY on these rules) */
.error-page {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--lg-bg);
  color: #dee2e6;
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.error-page h1 {
  font-size: 4rem;
  color: var(--lg-accent);
}
.error-page a {
  color: var(--lg-accent);
}

/* Server-status widget (15-core-pages.md §5.7) */
.status-dot {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  vertical-align: baseline;
}
.status-dot--online { background-color: var(--bs-success); }
.status-dot--offline { background-color: var(--bs-secondary); }
.connect-address { font-size: 1.25rem; user-select: all; }

/* Chat shoutbox (14-chat.md §5.10) */
.chat-box {
  height: 60vh;
  min-height: 20rem;
  overflow-y: auto;
}
.chat-msg-hidden {
  opacity: 0.5;
}