/* ==========================================================================
   HSBG Club — shared theme
   Tavern-ledger / hex-board look, applied on top of existing GridView markup.
   Import this AFTER bootstrap.min.css so these rules win.
   ========================================================================== */

:root{
  --hb-void:#120d09;
  --hb-panel:#1c150e;
  --hb-panel-2:#241b12;
  --hb-gold:#d4a636;
  --hb-gold-bright:#f2ca6b;
  --hb-ember:#c04a30;
  --hb-ember-bright:#e0603f;
  --hb-jade:#3f8663;
  --hb-jade-bright:#57b087;
  --hb-parchment:#efe6cf;
  --hb-parchment-dim:#cfc4a4;
  --hb-line: rgba(212,166,54,0.22);
  --hb-line-bright: rgba(212,166,54,0.45);
}

body{
  background:
    radial-gradient(ellipse at top, #241a10 0%, var(--hb-void) 55%),
    var(--hb-void) !important;
  color:var(--hb-parchment) !important;
  font-family:'Work Sans', sans-serif !important;
}

h1,h2,h3,h4,h5,#main center .col-12 + .col h3,
#CurrentLabel, #RegLabel, #FeaturedLabel, #UpcomingLabel, #PrevLabel{
  font-family:'Cinzel', serif !important;
}

/* ---------- page shell ---------- */
#main{ position:relative; z-index:2; }
#main .container{ max-width:1180px; }

/* section label rows -> styled block headers */
div[style*="text-align:center"] > span.aspNetLabel,
#CurrentLabel, #RegLabel, #FeaturedLabel, #UpcomingLabel, #PrevLabel{
  display:inline-flex; align-items:center; gap:10px;
  font-size:20px !important; letter-spacing:0.03em;
  color:var(--hb-parchment) !important;
  border-bottom:none !important;
}

/* the divs Web Forms renders labels inside of */
#main div[style*="text-align:center"]{
  text-align:left !important;
  margin: 40px 0 14px;
  padding-bottom:8px;
  border-bottom:1px solid var(--hb-line);
  display:flex; align-items:center; justify-content:space-between;
}

/* ---------- section tags (added via small badge spans, see markup) ---------- */
.hb-tag{
  font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
  padding:3px 10px; border-radius:12px; font-weight:600;
  font-family:'Work Sans', sans-serif; margin-left:10px; vertical-align:middle;
}
.hb-tag-current{ background:rgba(192,74,48,0.18); color:var(--hb-ember-bright); border:1px solid rgba(192,74,48,0.4); }
.hb-tag-registered{ background:rgba(212,166,54,0.15); color:var(--hb-gold-bright); border:1px solid var(--hb-line-bright); }
.hb-tag-featured{ background:rgba(63,134,99,0.18); color:var(--hb-jade-bright); border:1px solid rgba(63,134,99,0.4); }
.hb-tag-upcoming{ background:rgba(192,74,48,0.18); color:var(--hb-ember-bright); border:1px solid rgba(192,74,48,0.4); }
.hb-tag-previous{ background:rgba(239,230,207,0.10); color:var(--hb-parchment-dim); border:1px solid var(--hb-line); }

/* ---------- GridView -> ledger table ---------- */
.ledger, .ledger.table{
  width:100% !important;
  border-collapse:collapse !important;
  background:var(--hb-panel) !important;
  border:1px solid var(--hb-line) !important;
  border-radius:4px;
  overflow:hidden;
  margin-bottom:12px !important;
  color:var(--hb-parchment) !important;
}
.ledger-head, .ledger-head > th, .ledger th{
  text-align:left !important;
  font-size:10.5px !important; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--hb-gold) !important; padding:12px 14px !important;
  border-bottom:1px solid var(--hb-line-bright) !important;
  font-weight:600 !important; background:rgba(212,166,54,0.05) !important;
}
.ledger td{
  padding:12px 14px !important; border-bottom:1px solid var(--hb-line) !important;
  font-size:13.5px !important; vertical-align:middle !important;
  background:transparent !important; color:var(--hb-parchment) !important;
  border-top:none !important;
}
.ledger-row td{ background:var(--hb-panel) !important; }
.ledger-row-alt td{ background:var(--hb-panel-2) !important; }
.ledger tr:hover td{ background:rgba(212,166,54,0.06) !important; }

/* pagination */
.ledger-pager, .ledger-pager td{
  background:var(--hb-panel-2) !important; padding:10px !important; text-align:center !important;
}
.ledger-pager a{ color:var(--hb-gold-bright) !important; margin:0 6px; text-decoration:none; font-size:12.5px;}
.ledger-pager a:hover{ text-decoration:underline; }
.ledger-pager span{ color:var(--hb-parchment) !important; font-weight:700; margin:0 6px; }

/* ---------- buttons rendered by asp:Button ---------- */
.ledger-btn{
  font-family:'Work Sans', sans-serif !important;
  font-size:11.5px !important; font-weight:600 !important; letter-spacing:0.03em;
  padding:6px 12px !important; border-radius:3px !important;
  border:1px solid var(--hb-line-bright) !important;
  background:transparent !important; color:var(--hb-parchment-dim) !important;
  cursor:pointer; margin:2px 3px 2px 0 !important; text-transform:uppercase;
  transition:all .15s;
}
.ledger-btn:hover{ color:var(--hb-parchment) !important; border-color:var(--hb-gold-bright) !important; }

.ledger-btn-view{ color:var(--hb-gold-bright) !important; border-color:rgba(212,166,54,0.35) !important; }
.ledger-btn-submit{ color:var(--hb-parchment) !important; }
.ledger-btn-checkin{ color:var(--hb-jade-bright) !important; border-color:rgba(63,134,99,0.4) !important; }

/* register CTA — the important action, ember + solid */
.hb-reg-btn{
  font-family:'Work Sans', sans-serif !important;
  padding:7px 16px !important; border:none !important; border-radius:3px !important;
  background:linear-gradient(180deg, var(--hb-ember-bright), var(--hb-ember)) !important;
  color:#fff !important; font-size:11.5px !important; font-weight:700 !important;
  letter-spacing:0.04em; cursor:pointer; text-transform:uppercase;
}
.hb-reg-btn:hover{ box-shadow:0 6px 16px rgba(192,74,48,0.3); }

/* unregister — quiet link */
.hb-unreg-btn{
  background:none !important; border:none !important; color:var(--hb-ember-bright) !important;
  font-size:11.5px !important; text-decoration:underline; padding:4px 6px !important;
  font-family:'Work Sans', sans-serif !important;
}
.hb-unreg-btn:hover{ color:var(--hb-ember) !important; }

/* ---------- alerts ---------- */
#ErrorDiv.alert-danger, #ErrorTest.alert-danger{
  background:rgba(192,74,48,0.12) !important; border:1px solid rgba(192,74,48,0.4) !important;
  color:var(--hb-ember-bright) !important; border-radius:4px !important;
}
#CheckinMsg.alert-success{
  background:rgba(63,134,99,0.12) !important; border:1px solid rgba(63,134,99,0.4) !important;
  color:var(--hb-jade-bright) !important; border-radius:4px !important;
}

#TimeLabel{ color:var(--hb-parchment-dim) !important; font-size:13px !important; }

/* ---------- format badges (injected client-side, see hsbg-theme.js) ---------- */
.hb-hex{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:25px; margin-right:6px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  font-family:'JetBrains Mono', monospace; font-size:9px; font-weight:700;
  flex-shrink:0;
}
.hb-hex-solo{ background:rgba(212,166,54,0.28); color:var(--hb-gold-bright); }
.hb-hex-duos{ background:rgba(63,134,99,0.30); color:var(--hb-jade-bright); }
.hb-hex-trios{ background:rgba(192,74,48,0.30); color:var(--hb-ember-bright); }

@media (max-width: 640px){
  .ledger{ display:block; overflow-x:auto; }
}

/* ==========================================================================
   Sidebar — collapsed to an icon rail by default, opens on hover.
   Desktop only (min-width: 1200px), matching sidebar.css's own breakpoint
   (max-width: 1199px) so this never fights the mobile off-canvas toggle.
   Confirmed against sidebar.css: #header is a fixed 300px sidebar,
   #main carries margin-left: 300px to match.
   ========================================================================== */
@media (min-width: 1200px){
  #header{
    width:78px !important;
    overflow-x:hidden !important;
    transition:width 0.25s ease-in-out !important;
  }
  #header:hover{
    width:300px !important;
  }

  /* Hide the text labels while collapsed, keep icons visible as a rail */
  #header .nav-menu li > a > span{
    opacity:0;
    white-space:nowrap;
    transition:opacity 0.15s ease-in-out;
  }
  #header:hover .nav-menu li > a > span{
    opacity:1;
    transition:opacity 0.2s ease-in-out 0.08s;
  }

  /* Logo/brand image at the top of the sidebar, if present, shrinks too */
  #header .nav-menu{ overflow:hidden; white-space:nowrap; }

  /* Main content keeps a slim margin by default, expands to match on hover */
  #main{
    margin-left:78px !important;
    transition:margin-left 0.25s ease-in-out !important;
  }
  #header:hover ~ #main{
    margin-left:300px !important;
  }
}

/* ==========================================================================
   Sidebar — colors
   sidebar.css ships with the original template's cool blue-gray palette
   (#a8a9b4 text, #6f7180 icons, #040b14 background). Retheming to match the
   warm gold/parchment tavern palette used everywhere else on the site.
   ========================================================================== */
#header{
  background:var(--hb-void) !important;
  border-right:1px solid var(--hb-line);
}

.nav-menu a{
  color:var(--hb-parchment-dim) !important;
  border-left:2px solid transparent;
  transition:color 0.2s, border-color 0.2s, background 0.2s;
}
.nav-menu a i, .nav-menu a span[class*="bx-"]{
  color:var(--hb-parchment-dim) !important;
  transition:color 0.2s;
}

.nav-menu a:hover,
.nav-menu li:hover > a{
  color:var(--hb-parchment) !important;
  background:rgba(212,166,54,0.06);
  border-left-color:var(--hb-line-bright);
}
.nav-menu a:hover i, .nav-menu a:hover span[class*="bx-"],
.nav-menu li:hover > a i, .nav-menu li:hover > a span[class*="bx-"]{
  color:var(--hb-gold-bright) !important;
}

/* current page — a clearer, distinct marker instead of matching hover exactly */
.nav-menu .active > a{
  color:var(--hb-gold-bright) !important;
  background:rgba(212,166,54,0.1);
  border-left-color:var(--hb-gold);
}
.nav-menu .active > a i, .nav-menu .active > a span[class*="bx-"]{
  color:var(--hb-gold-bright) !important;
}

/* Log Out gets a subtle ember tint on hover instead of the same gold as
   everything else, since it's a different kind of action */
.nav-menu li#MenuLogout a:hover,
.nav-menu li#MenuLogout a:hover i{
  color:var(--hb-ember-bright) !important;
}
.nav-menu li#MenuLogout a:hover{
  border-left-color:var(--hb-ember);
}