/* Global PBG Orange theme override (applies to ALL pages) */
:root{
  /* Core theme variables used by the app's dynamic stylesheet */
  --theme-primary-rgb: 217,120,32;      /* #d97820 */
  --theme-secondary-rgb: 46,204,113;    /* green for status accents */

  --theme-bg-page-rgb: 13,15,19;        /* #0d0f13 */
  --theme-bg-primary-rgb: 18,22,29;     /* #12161d */
  --theme-bg-secondary-rgb: 24,30,40;   /* #181e28 */

  /* Bootstrap-ish overrides (some pages/components use these) */
  --bs-primary: #d97820;
  --bs-primary-rgb: 217,120,32;
  --bs-link-color: #d97820;
  --bs-link-hover-color: #ff9d3a;
}

/* Make sure anything still using old "accent" classes inherits the orange */
.btn-primary,
.badge-primary,
.text-primary,
.border-primary{
  --bs-btn-bg: #d97820;
  --bs-btn-border-color: #d97820;
  --bs-btn-hover-bg: #ff9d3a;
  --bs-btn-hover-border-color: #ff9d3a;
}

a{ color: rgb(var(--theme-primary-rgb)); }
a:hover{ color: #ff9d3a; }

/* Buttons / pills on leaderboard & store */
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active,
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background: rgba(var(--theme-primary-rgb), .15) !important;
  border-color: rgba(var(--theme-primary-rgb), .65) !important;
  color: #fff !important;
}

.btn-outline-primary{
  color: #fff !important;
  border-color: rgba(var(--theme-primary-rgb), .55) !important;
}

/* Card borders / highlights */
.card,
.package,
.store-package,
.store-card,
.stats-card{
  border-color: rgba(var(--theme-primary-rgb), .25) !important;
}

/* Make page-level separators/lines orange (where present) */
hr,
.divider,
.separator{
  border-color: rgba(var(--theme-primary-rgb), .25) !important;
}

/* Fix legacy yellow/gold outlines that appear on store cards */
[style*="#ffd"],
[style*="gold"],
[style*="#f1c40f"]{ /* best-effort: if inline styles exist they still win */ }

/* Inputs focus ring */
.form-control:focus,
.form-select:focus{
  border-color: rgba(var(--theme-primary-rgb), .6) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--theme-primary-rgb), .25) !important;
}

/* Checkbox/radio focus */
.form-check-input:focus{
  box-shadow: 0 0 0 .2rem rgba(var(--theme-primary-rgb), .25) !important;
  border-color: rgba(var(--theme-primary-rgb), .6) !important;
}

/* Tables (leaderboard) */
.table thead th{
  border-bottom-color: rgba(var(--theme-primary-rgb), .25) !important;
}
.table td,
.table th{
  border-top-color: rgba(var(--theme-primary-rgb), .12) !important;
}

/* Pagination */
.page-link{
  color: #fff !important;
  border-color: rgba(var(--theme-primary-rgb), .25) !important;
  background: rgba(0,0,0,.15) !important;
}
.page-link:hover{
  background: rgba(var(--theme-primary-rgb), .12) !important;
  border-color: rgba(var(--theme-primary-rgb), .55) !important;
}
.page-item.active .page-link{
  background: rgba(var(--theme-primary-rgb), .22) !important;
  border-color: rgba(var(--theme-primary-rgb), .75) !important;
}

/* Ensure orange accent icons in stat tiles */
.icon,
.fa,
.fas,
.far,
.fab{
  /* don't blanket recolor icons; only tweak where theme uses currentColor */
}

/* ------------------------------------------------------------------
   Fix "frame inside frame" look on non-home pages
   Some pages wrap content in multiple containers that inherit panel
   background/border styles from legacy themes.
   We flatten structural wrappers and keep the glass style on real cards.
   ------------------------------------------------------------------ */

/* Structural/layout wrappers should NOT look like cards */
.page-content,
.content,
.content-wrapper,
.section,
.section-body,
.wrapper,
.container,
.container-fluid,
.row,
[class*="col-"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Common legacy panel/widget wrappers */
.panel,
.panel-body,
.panel-default,
.widget,
.widget-content,
.content-box,
.box,
.box-body,
.block,
.block-body{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Keep the intended "glass card" styling on actual components */
.card,
.modal-content,
.server-card,
.leaderboard-card,
.store-card,
.package,
.store-package,
.vote-card,
.voting-card{
  background: rgba(15, 18, 22, 0.72) !important;
  border: 1px solid rgba(var(--theme-primary-rgb), 0.18) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
  border-radius: 16px !important;
}

/* Voting page often has a large outer container styled as a panel.
   Keep the inner voting box styled, flatten the outer wrapper. */
.voting,
.vote,
.vote-wrapper,
.vote-container{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}