/* ============================================================
   BBOutlands — app.css
   Design-system foundation. Loaded once from layouts/main.ejs,
   after Bootstrap so it can override Bootstrap variables.

   Step 1 of the UI overhaul: design tokens + the global layout
   styles migrated out of main.ejs. Visually faithful to the
   current site — near-blacks are unified, hairlines pick up a
   faint warm tint, and the single canonical gold replaces the
   eight ad-hoc variants.

   Reference: BBOutlands Design System artifact.
   ============================================================ */

:root {
  /* ---- Ground & surfaces (cool blue-black) ---- */
  --ground:        #0a0d12;   /* page edges, navbar */
  --surface-1:     #0d1117;   /* body / main content, inputs */
  --surface-2:     #161b22;   /* cards, panels, modals */
  --surface-3:     #1c232c;   /* raised chips, secondary buttons, hover */

  /* ---- Hairlines (warm-biased) ---- */
  --border:        rgba(240, 214, 165, 0.11);
  --border-strong: rgba(240, 214, 165, 0.22);

  /* ---- Text: one ramp, three steps ---- */
  --ink:           #e6edf3;
  --ink-muted:     #9aa7b4;
  --ink-subtle:    #6b7683;

  /* ---- Brand accent: the one gold ---- */
  --gold:          #f5a927;
  --gold-bright:   #ffc65c;
  --gold-ink:      #1a1204;   /* text/icons on a gold fill */
  --gold-wash:     rgba(245, 169, 39, 0.13);
  --gold-line:     rgba(245, 169, 39, 0.34);

  /* ---- Semantic: NOT the accent hue ---- */
  --success:       #3fb950;
  --danger:        #f85149;
  --warning:       #e8833a;
  --info:          #58a6ff;
  --success-wash:  rgba(63, 185, 80, 0.14);
  --danger-wash:   rgba(248, 81, 73, 0.14);
  --warning-wash:  rgba(232, 131, 58, 0.14);
  --info-wash:     rgba(88, 166, 255, 0.14);

  /* ---- Radius: three steps ---- */
  --radius-sm:     0.375rem;  /* buttons, inputs, badges */
  --radius:        0.5rem;    /* cards, tables, alerts */
  --radius-lg:     0.875rem;  /* modals, hero panels */

  /* ---- Elevation: two steps ---- */
  --shadow-1:      0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2:      0 12px 32px rgba(0, 0, 0, 0.45);

  /* ---- Spacing scale ---- */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;

  /* ---- Type ---- */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ============================================================
   Bootstrap bridge — only the variables whose current rendered
   value already equals the token. This is a rename, not a
   restyle. Wider Bootstrap remaps (links, muted text, borders)
   are deliberate later steps, not this one.
   ============================================================ */

[data-bs-theme="dark"] {
  --bs-body-bg: var(--surface-1);   /* was #0d1117 */
  --bs-body-color: var(--ink);      /* was #e6edf3 */
}

/* ============================================================
   Global layout — migrated from layouts/main.ejs
   ============================================================ */

body {
  background-color: var(--surface-1);
  color: var(--ink);
}

a { text-decoration: none; }

/* ---- Navbar ---- */
.navbar {
  background-color: var(--ground) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.navbar-brand {
  display: inline-flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 1rem;
}
.navbar-brand-logo {
  display: block;
  height: 60px;
  width: auto;
  max-width: min(52vw, 280px);
  object-fit: contain;
}
.nav-link-with-badge {
  display: inline-flex;
  align-items: flex-start;
  gap: .18rem;
}
.nav-badge-new {
  font-size: .62rem;
  letter-spacing: .04em;
  line-height: 1;
  transform: translateY(-.22rem);
}

/* ---- Page header (partials/page-header.ejs) ---- */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3) var(--s4);
  margin-bottom: var(--s5);
}
.page-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.page-subtitle {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  margin-top: var(--s2);
}
.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
}

/* ---- Breadcrumbs (partials/breadcrumbs.ejs) ---- */
.breadcrumb {
  --bs-breadcrumb-divider-color: var(--ink-subtle);
  font-size: 0.8125rem;
  margin-bottom: var(--s3);
}
.breadcrumb-item a { color: var(--ink-muted); }
.breadcrumb-item a:hover { color: var(--gold); }
.breadcrumb-item.active { color: var(--ink-subtle); }

/* ---- Cards ---- */
.card {
  background: var(--surface-2);
  border-color: var(--border);
  border-radius: var(--radius);
}
.card-header {
  background: rgba(255, 255, 255, 0.02);
  border-bottom-color: var(--border);
  font-weight: 600;
}
.card-footer {
  background: rgba(255, 255, 255, 0.02);
  border-top-color: var(--border);
}

/* ---- Tables — one treatment ---- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
  --bs-table-striped-color: var(--ink);
  --bs-table-hover-bg: var(--gold-wash);
  --bs-table-hover-color: var(--ink);
  vertical-align: middle;
}
.table > thead {
  --bs-table-color: var(--ink-muted);
  border-bottom: 2px solid var(--border-strong);
}
.table > thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--ink-muted);
  white-space: nowrap;
}
/* Gold header — opt-in emphasis for the primary table on a page */
thead.table-gold th,
.table > thead.table-gold th {
  background-color: var(--gold) !important;
  color: var(--gold-ink) !important;
  border-color: var(--gold) !important;
}
/* .table-dark is redundant now — fold it into the standard treatment */
.table-dark {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
  --bs-table-striped-color: var(--ink);
  --bs-table-hover-bg: var(--gold-wash);
  --bs-table-hover-color: var(--ink);
}

/* ---- Cookie banner ---- */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #212529;
  color: #fff;
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: none;
  z-index: 1050;
}
.cookie-banner p {
  margin: 0;
  font-size: 0.9rem;
}

/* ---- Footer support link ---- */
.footer-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
}
.footer-support-link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  border: 1px solid #ffdd00;
  background: #ffdd00;
  color: #111;
  box-shadow: 0 8px 22px rgba(255, 221, 0, .16);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.footer-support-link:hover {
  background: #ffe45c;
  color: #111;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(255, 221, 0, .22);
}
.footer-support-logo {
  width: 1.95rem;
  height: 1.95rem;
  border-radius: .6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .92);
  color: #111;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
  flex: 0 0 auto;
}
.footer-support-logo i {
  font-size: 1rem;
  line-height: 1;
}
.footer-support-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.02;
}
.footer-support-title {
  font-size: .94rem;
  font-weight: 800;
  color: #111;
}
.footer-support-brand {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, .72);
}

/* ---- PWA install / update panel ---- */
.pwa-actions {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: min(19rem, calc(100vw - 2rem));
  display: grid;
  gap: .5rem;
  z-index: 1080;
}
.pwa-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: .9rem;
  background:
    radial-gradient(circle at top right, var(--gold-wash), transparent 34%),
    linear-gradient(180deg, rgba(18, 23, 31, .98), rgba(10, 13, 19, .98));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.pwa-action-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .7rem 2.85rem .55rem .7rem;
  justify-content: stretch;
}
.pwa-dismiss {
  position: absolute;
  top: .55rem;
  right: .55rem;
  width: 1.65rem;
  height: 1.65rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 12, 17, .78);
  color: #aeb8c3;
  font-size: .92rem;
  line-height: 1;
  z-index: 1;
}
.pwa-dismiss:hover {
  background: rgba(255, 255, 255, .12);
  color: #f4efe6;
}
.pwa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border: 0;
  border-radius: 999px;
  padding: .58rem .82rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  min-width: 0;
  font-size: .86rem;
}
.pwa-btn-install {
  background: var(--success);
  color: #fff;
}
.pwa-btn-update {
  background: rgba(255, 255, 255, .08);
  color: #edf2f7;
  border: 1px solid rgba(255, 255, 255, .14);
}
.pwa-btn-ios {
  background: rgba(255, 255, 255, .08);
  color: #f3f4f6;
  border: 1px solid rgba(255, 255, 255, .12);
}
.pwa-btn:disabled {
  opacity: .72;
}
.pwa-meta {
  display: flex;
  flex-wrap: nowrap;
  gap: .45rem;
  padding: 0 .7rem .75rem;
}
.pwa-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .32rem .56rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  color: #c7d0da;
  font-size: .72rem;
  font-weight: 700;
  flex: 1 1 0;
  justify-content: center;
}
.pwa-ios-panel {
  padding: 0 .85rem .85rem;
  color: #c6d0db;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.pwa-ios-panel p,
.pwa-ios-panel ol {
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
}
.pwa-ios-panel ol {
  padding-left: 1.1rem;
  margin-top: .65rem;
}
.pwa-ios-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-bottom: .6rem;
  color: var(--gold);
  font-weight: 800;
}
.pwa-ios-close {
  border: 0;
  background: transparent;
  color: #c6d0db;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0;
}

@media (max-width: 575.98px) {
  .pwa-actions {
    right: .75rem;
    left: .75rem;
    bottom: max(.75rem, env(safe-area-inset-bottom));
    width: auto;
  }
  .pwa-action-list {
    padding-right: .7rem;
    padding-top: 2.35rem;
  }
  .pwa-btn {
    width: 100%;
  }
  .pwa-dismiss {
    top: .55rem;
    right: .55rem;
  }
}
@media (max-width: 991.98px) {
  body.pwa-has-bottom-sheet {
    padding-bottom: var(--pwa-sheet-height, 0px);
  }
}

/* ============================================================
   Buttons (step 2)

   Stays on Bootstrap's own .btn-* classes — only the CSS
   variables Bootstrap already exposes are remapped to tokens.

   Canonical usage:
     .btn-primary            one primary action per view (gold)
     .btn-outline-secondary  everything else that acts/navigates
     .btn-ghost              low-emphasis, inside toolbars/tables
     .btn-outline-danger     destructive (always outline, + confirm)
     .btn-secondary          legacy solid neutral — kept on-brand
   Sizes: default, or .btn-sm for table-row actions. No .btn-lg
   except a full-width submit on a single-purpose page (login).
   ============================================================ */

.btn {
  --bs-btn-focus-shadow-rgb: 245, 169, 39;   /* gold focus ring everywhere */
  font-weight: 600;
}

/* Primary — gold */
[data-bs-theme="dark"] .btn-primary,
.btn-primary {
  --bs-btn-color: var(--gold-ink);
  --bs-btn-bg: var(--gold);
  --bs-btn-border-color: var(--gold);
  --bs-btn-hover-color: var(--gold-ink);
  --bs-btn-hover-bg: var(--gold-bright);
  --bs-btn-hover-border-color: var(--gold-bright);
  --bs-btn-active-color: var(--gold-ink);
  --bs-btn-active-bg: var(--gold-bright);
  --bs-btn-active-border-color: var(--gold-bright);
  --bs-btn-disabled-color: var(--gold-ink);
  --bs-btn-disabled-bg: var(--gold);
  --bs-btn-disabled-border-color: var(--gold);
}

/* Secondary — subtle outline, the default for non-primary actions */
[data-bs-theme="dark"] .btn-outline-secondary,
.btn-outline-secondary {
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--surface-3);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--surface-3);
  --bs-btn-active-border-color: var(--border-strong);
  --bs-btn-disabled-color: var(--ink-subtle);
  --bs-btn-disabled-border-color: var(--border);
}

/* Legacy solid neutral — kept consistent for any stragglers */
[data-bs-theme="dark"] .btn-secondary,
.btn-secondary {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: var(--surface-3);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: #232c37;
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: #232c37;
  --bs-btn-active-border-color: var(--border-strong);
}

/* Ghost — no border until hover */
.btn-ghost {
  --bs-btn-color: var(--ink-muted);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--surface-3);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--surface-3);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--ink-subtle);
  --bs-btn-disabled-border-color: transparent;
}

/* Destructive — outline only */
[data-bs-theme="dark"] .btn-outline-danger,
.btn-outline-danger {
  --bs-btn-color: var(--danger);
  --bs-btn-border-color: rgba(248, 81, 73, 0.45);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--danger);
  --bs-btn-hover-border-color: var(--danger);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--danger);
  --bs-btn-active-border-color: var(--danger);
  --bs-btn-disabled-color: var(--danger);
  --bs-btn-disabled-border-color: rgba(248, 81, 73, 0.3);
}

/* Link-style button — text actions like "Leaderboard →" */
[data-bs-theme="dark"] .btn-link,
.btn-link {
  --bs-btn-color: var(--gold);
  --bs-btn-hover-color: var(--gold-bright);
  --bs-btn-font-weight: 600;
  text-decoration: none;
}

/* ============================================================
   Modals (step 4)
   ============================================================ */

.modal-content {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.modal-header,
.modal-footer {
  border-color: var(--border);
}
.modal-backdrop.show { opacity: 0.66; }

/* Shared confirmation dialog (partials/confirm-modal.ejs) */
.confirm-modal .modal-header {
  align-items: center;
  gap: var(--s3);
}
.confirm-modal-icon {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  display: inline-grid;
  place-items: center;
  font-size: 1.15rem;
}
.confirm-modal-icon[data-tone="danger"] {
  background: var(--danger-wash);
  color: var(--danger);
}
.confirm-modal-icon[data-tone="primary"] {
  background: var(--gold-wash);
  color: var(--gold);
}
.confirm-modal .modal-title { flex: 1 1 auto; }
.confirm-modal .modal-body { color: var(--ink-muted); }

/* Flash messages (window.flashMessage — replaces alert()) */
.flash-host {
  position: fixed;
  top: var(--s4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  width: min(92vw, 30rem);
  pointer-events: none;
}
.flash-msg {
  pointer-events: auto;
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  font-size: 0.9375rem;
  font-weight: 500;
  border: 1px solid var(--border-strong);
  border-left-width: 3px;
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.flash-msg.flash-in { opacity: 1; transform: none; }
.flash-danger { border-left-color: var(--danger); }
.flash-success { border-left-color: var(--success); }
.flash-info { border-left-color: var(--info); }
@media (prefers-reduced-motion: reduce) {
  .flash-msg { transition: none; }
}

/* ============================================================
   Login (step 5)
   ============================================================ */

.btn-discord {
  --bs-btn-color: #fff;
  --bs-btn-bg: #5865f2;
  --bs-btn-border-color: #5865f2;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4752c4;
  --bs-btn-hover-border-color: #4752c4;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4752c4;
  --bs-btn-active-border-color: #4752c4;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #5865f2;
  --bs-btn-disabled-border-color: #5865f2;
  font-weight: 700;
}

.login-shell {
  min-height: calc(100vh - 15rem);
  display: grid;
  place-items: center;
  padding: var(--s5) 0;
}
.login-card {
  width: min(23rem, 100%);
  text-align: center;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  padding: var(--s7) var(--s6);
  background:
    radial-gradient(120% 120% at 50% 0%, var(--gold-wash), transparent 55%),
    var(--surface-2);
  box-shadow: var(--shadow-2);
}
.login-logo {
  display: block;
  width: min(15rem, 76%);
  height: auto;
  margin: 0 auto var(--s6);
  /* the logo art has a solid near-black backing — lighten-blend it away
     so it sits on the card's gradient instead of a hard square */
  mix-blend-mode: lighten;
}

/* ============================================================
   Contest cards — dashboard (migrated from dashboard.ejs)
   ============================================================ */

.clickable-card {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--radius);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.clickable-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.45);
  border-color: var(--gold);
}
.contest-roll-badge {
  background: var(--gold);
  color: var(--gold-ink);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.contest-limit-badge {
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  font-weight: 800;
  letter-spacing: 0.01em;
}
@media (max-width: 576px) {
  .contest-card-grid { --bs-gutter-x: 0; }
  .contest-card-col { padding-left: 0; padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .clickable-card { transition: none; }
}

/* ============================================================
   Small per-page bits (migrated out of view <style> blocks)
   ============================================================ */

/* Prevent iOS zoom-on-focus for small inputs (was inlined per page) */
@media (max-width: 576px) {
  .form-control-sm,
  .form-select-sm { font-size: 16px; }
}

/* entries/list — edit-history timeline */
.timeline li {
  position: relative;
  padding-left: 1.5rem;
  border-left: 2px solid var(--info);
}
.timeline li::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  left: -0.45rem;
  width: 0.8rem;
  height: 0.8rem;
  background-color: var(--info);
  border-radius: 50%;
}

/* admin/users/list — desktop toast */
@media (min-width: 992px) {
  #toastNotice { bottom: 24px; left: 50%; right: auto; top: auto; transform: translateX(-50%); }
  #toastNotice .alert {
    font-size: 1.1rem;
    padding: 0.9rem 1.25rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
  }
}

/* admin/users/census — history table spacing */
.history-table th,
.history-table td { padding-right: 1rem; }
.history-table td + td,
.history-table th + th { padding-left: 0.75rem; }

/* howto — example figures */
.howto-example-figure {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.howto-example-img {
  max-height: 240px;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* profile — dungeon progress cards */
.dungeon-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s4);
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.dungeon-progress {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
}
@media (max-width: 576px) {
  .dungeon-card { padding: var(--s3); }
}