/* =========================================
   WarBazE UI Template (uses tokens.css)
   - No hard-coded theme colors (only tokens)
   - Single definitions (no duplicates)
========================================= */

/* ------------------------------
   Base / Reset-ish
------------------------------ */
html, body { height: 100%; }

body{
  font-family: var(--wb-font-ui);
  background: var(--wb-color-bg);
  color: var(--wb-color-text);
}

/* Utility: full-width breakout inside Bootstrap container */
.wb-breakout{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ------------------------------
   Typography helpers
------------------------------ */
.wb-topline{
  color: var(--wb-color-text-subtle);
  letter-spacing: var(--wb-track-wide);
  text-transform: uppercase;
  font-size: .75rem;
}

.wb-title{
  font-weight: var(--wb-weight-black);
  letter-spacing: var(--wb-track-tight);
}

.wb-brand{
  font-weight: var(--wb-weight-black);
  letter-spacing: .02em;
  color: var(--wb-color-text);
  text-decoration: none;
}

.wb-brand .e{ color: var(--wb-color-brand); }

.wb-sub{
  color: var(--wb-color-text-muted);
}

/* Section headings (e.g. home pillars, "Recently updated") — values from tokens.css */
.wb-heading{
  color: var(--wb-color-heading);
  font-weight: var(--wb-heading-weight);
  letter-spacing: var(--wb-track-heading);
  margin-bottom: var(--wb-heading-margin-bottom);
}

/* ------------------------------
   Buttons (tokenized)
------------------------------ */
.btn-wb-primary,
.wb-btn-gold{
  background: var(--wb-color-brand);
  border-color: var(--wb-color-brand);
  color: #111;
  font-weight: var(--wb-weight-black);
  border-radius: var(--wb-radius-md);
  transition:
    background var(--wb-duration) var(--wb-ease),
    border-color var(--wb-duration) var(--wb-ease),
    transform var(--wb-duration-fast) var(--wb-ease);
}

.btn-wb-primary:hover,
.wb-btn-gold:hover{
  background: var(--wb-color-brand-hover);
  border-color: var(--wb-color-brand-hover);
  color: #111;
}

.btn-wb-outline{
  background: var(--wb-btn-outline-bg, transparent);
  border-color: var(--wb-btn-outline-border, var(--wb-color-border-strong));
  color: var(--wb-btn-outline-text, var(--wb-color-text));
  font-weight: var(--wb-weight-semibold);
  border-radius: var(--wb-radius-md);
  transition:
    background var(--wb-duration) var(--wb-ease),
    border-color var(--wb-duration) var(--wb-ease),
    color var(--wb-duration) var(--wb-ease);
}

.btn-wb-outline:hover{
  background: var(--wb-btn-outline-bg-hover, rgba(0,0,0,.04));
  border-color: var(--wb-color-brand);
  color: var(--wb-color-brand);
}

.wb-btn-dark{
  border-color: var(--wb-color-btn-outline-border);
  color: var(--wb-color-btn-outline-text);
  background: rgba(0,0,0,.12);
  font-weight: var(--wb-weight-bold);
  transition:
    border-color var(--wb-duration) var(--wb-ease),
    color var(--wb-duration) var(--wb-ease),
    background var(--wb-duration) var(--wb-ease);
}

.wb-btn-dark:hover{
  border-color: var(--wb-color-brand);
  color: var(--wb-color-brand);
  background: rgba(0,0,0,.18);
}

/* ------------------------------
   Navbar (tokenized)
------------------------------ */
.wb-navbar{
  background: var(--wb-nav-bg);
  backdrop-filter: var(--wb-nav-backdrop);
  -webkit-backdrop-filter: var(--wb-nav-backdrop);
  border-bottom: 1px solid var(--wb-nav-border);
}

.wb-navbar .navbar-inner{
  padding-top: var(--wb-nav-height-pad-y);
  padding-bottom: var(--wb-nav-height-pad-y);
}

.wb-navbar .navbar-brand{ text-decoration: none; }

.wb-navlink{
  color: var(--wb-nav-text) !important;
  border-radius: var(--wb-nav-radius);
  padding: .45rem .70rem;
  transition:
    background var(--wb-duration) var(--wb-ease),
    color var(--wb-duration) var(--wb-ease);
}

.wb-navlink:hover{
  color: var(--wb-nav-text-hover) !important;
  background: var(--wb-nav-link-bg-hover);
}

.wb-navlink.active{
  color: var(--wb-nav-text-active) !important;
  background: var(--wb-nav-link-bg-active);
  font-weight: var(--wb-weight-semibold);
}

/* ------------------------------
   Hero / Stage (strong bg via hero tokens)
------------------------------ */
.wb-stage{
  border-radius: var(--wb-radius-xl);
  overflow: hidden;
  box-shadow: var(--wb-shadow-stage);
  border: 1px solid var(--wb-color-border-strong);
  color: var(--wb-hero-text);

  background:
    radial-gradient(1200px 700px at 25% 30%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 520px at 85% 30%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(135deg, var(--wb-hero-grad-start), var(--wb-hero-grad-end));
}

/* Hero subtext should read on stage */
.wb-stage .wb-sub{ color: var(--wb-hero-muted); }

/* Glass panel inside hero */
.wb-panel{
  border-radius: var(--wb-radius-lg);
  border: 1px solid var(--wb-hero-border);
  background: var(--wb-hero-panel-bg);
  box-shadow: var(--wb-shadow-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Stat cards inside hero */
.wb-stat{
  border-radius: var(--wb-radius-md);
  border: 1px solid var(--wb-hero-border);
  background: var(--wb-hero-card-bg);
  padding: 18px;
}

.wb-stat .num{
  font-size: 1.75rem;
  font-weight: var(--wb-weight-black);
  line-height: 1.05;
  color: #fff;
}

.wb-stat .lbl{
  color: rgba(233,236,239,.65);
  font-size: .92rem;
}

/* ------------------------------
   Role badge (used on dashboard)
------------------------------ */
.wb-role{
  display:inline-flex;
  align-items:center;
  padding:.22rem .55rem;
  border-radius: var(--wb-radius-pill);
  font-size: .72rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  border: 1px solid var(--wb-hero-border);
  background: rgba(255,255,255,.06);
  color: rgba(233,236,239,.90);
}

.wb-role--gold{
  border-color: rgba(176,141,87,.35);
  background: rgba(176,141,87,.14);
}
.wb-role--steel{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}
.wb-role--muted{
  border-color: rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
}

/* ------------------------------
   Search panel (light surface)
------------------------------ */
.wb-search{
  background: rgba(255,255,255,.96);
  border-radius: var(--wb-radius-md);
  border: 1px solid var(--wb-color-border-strong);
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}

.wb-search .form-control{
  border-radius: var(--wb-radius-sm);
}

/* ------------------------------
   List cards (generic cards)
------------------------------ */
.wb-listcard{
  border-radius: var(--wb-radius-lg);
  border: 1px solid var(--wb-color-border-strong);
  box-shadow: var(--wb-shadow-card);
  overflow: hidden;
  background: var(--wb-color-surface);
}

.wb-listcard .head{
  padding: 14px 16px;
  border-bottom: 1px solid var(--wb-color-border);
  background: var(--wb-color-surface-muted);
  font-weight: var(--wb-weight-black);
}

.wb-listcard .rowitem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--wb-color-border);
}

.wb-listcard .rowitem:last-child{ border-bottom: 0; }

/* ------------------------------
   Floating action button
------------------------------ */
.wb-fab{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1050;
}

/* =========================================
   Account dashboard polish
   (works for home + /account dashboard)
========================================= */

/* 1) Make stage spacing & inner layout feel premium */
.wb-stage{
  padding: 2.25rem !important;
}
@media (min-width: 992px){
  .wb-stage{
    padding: 3rem !important;
    min-height: 520px;
  }
}

/* Improve hero headings inside stage */
.wb-stage .display-6,
.wb-stage .display-5,
.wb-stage .display-4{
  letter-spacing: -0.02em;
}

/* 2) Stats panel refinements */
.wb-panel{
  padding: 1.25rem;
}
@media (min-width: 992px){
  .wb-panel{ padding: 1.5rem; }
}

/* Make the stat grid breathe on wide screens */
.wb-panel .row.g-3{
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

.wb-stat{
  padding: 16px;
  transition: transform var(--wb-duration-fast) var(--wb-ease),
              border-color var(--wb-duration) var(--wb-ease),
              background var(--wb-duration) var(--wb-ease);
}
.wb-stat:hover{
  transform: translateY(-1px);
  border-color: rgba(176,141,87,.28);
  background: color-mix(in srgb, var(--wb-hero-card-bg) 75%, rgba(176,141,87,.18) 25%);
}

/* 3) Stage quick links look like pills, not default buttons */
.wb-panel .btn.wb-btn-dark{
  border-radius: var(--wb-radius-pill);
  padding: .35rem .70rem;
  font-size: .90rem;
}

/* 4) Search block — make it look intentional */
.wb-search{
  padding: 1.25rem;
  border-radius: var(--wb-radius-xl);
  box-shadow: 0 18px 45px rgba(0,0,0,.12);
}
.wb-search .fw-semibold{
  color: rgba(17,20,24,.80);
}
.wb-search .form-control{
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.wb-search .form-control:focus{
  border-color: rgba(176,141,87,.55);
  box-shadow: 0 0 0 .25rem rgba(176,141,87,.18);
}
.wb-search .btn.btn-primary{
  border-radius: var(--wb-radius-md);
  font-weight: var(--wb-weight-bold);
}

/* Tip line subtle */
.wb-search .small.text-muted{
  color: rgba(17,20,24,.55) !important;
}

/* 5) Dark list cards (so they match stage) */
.wb-listcard{
  border-radius: var(--wb-radius-xl);
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(25,30,36,.92), rgba(20,24,29,.92));
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  color: rgba(233,236,239,.92);
}

/* Header */
.wb-listcard .head{
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: rgba(233,236,239,.92);
  padding: 14px 16px;
}

/* Row items */
.wb-listcard .rowitem{
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 12px 16px;
  transition: background var(--wb-duration) var(--wb-ease);
}
.wb-listcard .rowitem:hover{
  background: rgba(255,255,255,.04);
}

.wb-listcard a{
  color: var(--wb-color-link);
  text-decoration: none;
}
.wb-listcard a:visited{
  color: var(--wb-color-link-visited);
}
.wb-listcard a:hover{
  color: var(--wb-color-brand-hover);
  text-decoration: underline;
}

/* ID on right */
.wb-id{
  color: rgba(233,236,239,.55);
}

/* 6) Gold add buttons consistent with hero */
.wb-listcard .btn.wb-btn-gold{
  border-radius: var(--wb-radius-md);
  padding: .40rem .70rem;
  font-weight: var(--wb-weight-black);
}

/* 7) Align section gutters nicely under stage */
@media (min-width: 992px){
  .wb-dash .row.g-3.g-lg-4{
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
  }
}

/* 8) Floating Messages button: nicer */
.wb-fab{
  border-radius: var(--wb-radius-pill) !important;
  padding: .85rem 1.15rem !important;
  font-weight: var(--wb-weight-bold);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}

/* 9) Improve navbar button appearance when dark theme */
.wb-navbar .btn{
  border-radius: var(--wb-radius-md);
}
.wb-navbar .btn-wb-outline{
  background: rgba(0,0,0,.10);
}

/* 10) Mobile: make stage stack better */
@media (max-width: 991.98px){
  .wb-panel .btn.wb-btn-dark{
    width: 100%;
    justify-content: center;
  }
}

/* =========================================
   Hyperlinks: gold (readable on dark) / light grey (visited)
========================================= */
body.wb-theme-dark a{
  color: var(--wb-color-link);
  text-decoration: none;
}
body.wb-theme-dark a:hover{
  color: var(--wb-color-brand-hover);
  text-decoration: underline;
}
body.wb-theme-dark a:visited{
  color: var(--wb-color-link-visited);
}
body.wb-theme-dark a:visited:hover{
  color: var(--wb-color-brand-hover);
}
/* Table code/FPN: highlight identifiers (e.g. Feldpost number) */
body.wb-theme-dark .card .table td code.wb-fpn,
body.wb-theme-dark .table td code.wb-fpn{
  color: var(--wb-color-brand);
  font-variant-numeric: tabular-nums;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* Tables: force link color so Unit/Rank etc. stay readable */
body.wb-theme-dark .table a,
body.wb-theme-dark .card .table a{
  color: var(--wb-color-link);
}
body.wb-theme-dark .table a:hover,
body.wb-theme-dark .card .table a:hover{
  color: var(--wb-color-brand-hover);
  text-decoration: underline;
}
body.wb-theme-dark .table a:visited{
  color: var(--wb-color-link-visited);
}

/* Cards (e.g. search results): dark surface so content and "No X found." are readable */
body.wb-theme-dark .card{
  background: var(--wb-color-surface);
  border-color: var(--wb-color-border);
  color: var(--wb-color-text);
}
body.wb-theme-dark .card .card-header{
  background: var(--wb-color-surface-muted);
  border-color: var(--wb-color-border);
  color: var(--wb-color-text);
}
body.wb-theme-dark .card .card-body{
  background: var(--wb-color-surface);
  color: var(--wb-color-text);
}
body.wb-theme-dark .card .text-muted{
  color: var(--wb-color-text-muted) !important;
}

/* Card tables: dark surface, no blue stripe; all body text readable */
body.wb-theme-dark .card .table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--wb-color-text);
  --bs-table-striped-bg: var(--wb-color-surface-muted);
  --bs-table-striped-color: var(--wb-color-text);
  --bs-table-hover-bg: var(--wb-color-surface-muted);
  --bs-table-hover-color: var(--wb-color-text);
  color: var(--wb-color-text);
  border-color: var(--wb-color-border);
}
body.wb-theme-dark .card .table thead th{
  background: var(--wb-color-surface-muted);
  border-color: var(--wb-color-border);
  color: var(--wb-color-text);
}
body.wb-theme-dark .card .table tbody td{
  border-color: var(--wb-color-border);
  color: var(--wb-color-text);
}
body.wb-theme-dark .card .table td.text-muted.text-center{
  color: var(--wb-color-empty-state) !important;
  background: transparent !important;
}

/* List group (e.g. participants list, search results): dark surface so link colors read well */
body.wb-theme-dark .list-group-item{
  background: var(--wb-color-surface);
  border-color: var(--wb-color-border);
  color: var(--wb-color-text);
}
body.wb-theme-dark .list-group-item:hover,
body.wb-theme-dark .list-group-item:focus{
  background: var(--wb-color-surface-muted);
  color: var(--wb-color-text);
}
body.wb-theme-dark .list-group-item-action{
  color: var(--wb-color-link);
}
body.wb-theme-dark .list-group-item-action:visited{
  color: var(--wb-color-link-visited);
}
body.wb-theme-dark .list-group-item-action:hover{
  color: var(--wb-color-brand-hover);
  background: var(--wb-color-surface-muted);
}
body.wb-theme-dark .list-group-item.text-muted{
  color: var(--wb-color-text-muted) !important;
}

/* Comment author link (username → profile) */
.comment-author-link{
  color: var(--wb-color-link, var(--wb-color-brand));
  text-decoration: none;
}
.comment-author-link:hover{
  color: var(--wb-color-brand-hover, var(--wb-color-brand));
  text-decoration: underline;
}