/* =========================================================
   Exotics Group - style.css (refined)
   ========================================================= */

/* ---------- CSS Variables (Dark Theme) ---------- */
:root {
  --bg: #0a0d11;
  --panel: #0e1217;
  --ink: #f2f2f2;
  --muted: #b3b9c4;
  --accent: #caa866;
  --accent-ink: #111;
  --link: #7fb5ff;
  --panel-raise: #141a1f;
  --panel-elev: #1a2229;
  --line-soft: #26303a;
  --ink-2: #e8eef3;
  --ink-muted: #9fb0bf;
  --danger: #ff6b6b;
  --focus: rgba(0, 0, 0, 0.25);
  --shadow-lg: rgba(0, 0, 0, 0.45);
}

/* Prevent auto-zoom on focus */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    font-size: 16px !important;
}

/* Also apply inside modals and Fomantic inputs */
.ui.form input,
.ui.input input,
.ui.modal input {
    font-size: 16px !important;
}

/* Even more aggressive */
input:focus {
    font-size: 16px !important;
}


/* ---------- Base ---------- */
html,
body {
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  color: var(--link);
}
a:hover {
  opacity: 0.9;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
.u-muted {
  color: var(--muted) !important;
}

/* ---------- Header / Top Nav ---------- */
.ui.secondary.inverted.menu {
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: saturate(120%) blur(8px);
}
.ui.secondary.inverted.menu .item {
  color: var(--ink) !important;
}

.logo-wordmark {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1;
  white-space: nowrap;
}

/* Desktop vs Mobile menus */
@media (max-width: 991.98px) {
  .ui.menu .desktop-nav {
    display: none !important;
  }
}
@media (min-width: 992px) {
  #mobileMenuToggle,
  #mobileMenu {
    display: none !important;
  }
}

/* iOS safe-area padding */
@supports (padding: max(0px)) {
  .ui.secondary.menu {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}

/* ---------- Hero (video bg) ---------- */
.hero {
  position: relative;
  min-height: calc(var(--vh, 1vh) * 88);
  padding: calc(var(--vh, 1vh) * 18) 0 calc(var(--vh, 1vh) * 10);
  overflow: hidden;
  background: #000;
}
.hero > video.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
  filter: brightness(80%) contrast(105%) saturate(110%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
      1200px 600px at 85% 40%,
      rgba(202, 168, 102, 0.22),
      transparent 60%
    ),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.5));
}
.hero .ui.container,
.hero .hero-content {
  position: relative;
  z-index: 3;
}
.headline {
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1.05;
  margin: 0 0 0.25rem;
  color: #fff;
}
.hero .sub {
  margin: 0 0 1rem;
  font-size: clamp(14px, 2.2vw, 18px);
  color: #ccc;
}

/* Search */
.search-wrap .ui.massive.input input {
  background: rgba(15, 18, 22, 0.74) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: var(--ink) !important;
  border-radius: 12px !important;
  padding: 1rem 1.25rem !important;
}

/* Chips */
.prompt-chips .label.chip {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--ink) !important;
  border-radius: 999px !important;
}

/* ---------- Sections / Cards ---------- */
.section {
  padding: 4rem 0;
}
.section-head .ui.header {
  color: var(--ink);
}

.ui.cards > .card {
  background: #0f1318 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
  overflow: hidden;
}
.ui.cards > .card .content .header {
  color: var(--ink);
}
.ui.cards > .card .content .description {
  color: var(--muted);
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 4rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

/* ---------- Modals (Generic) ---------- */
.ui.page.modals.dimmer.visible,
.ui.dimmer.modals.visible {
  backdrop-filter: blur(10px) saturate(110%);
  background-color: rgba(10, 14, 18, 0.6) !important;
}
.ui.modal {
  filter: none !important;
  backdrop-filter: none !important;
}

.ui.basic.modal {
  background: transparent !important;
}
.ui.basic.modal > .close {
  color: var(--ink) !important;
  opacity: 0.9;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.ui.basic.modal > .close:hover {
  opacity: 1;
}

.ui.basic.modal .eg-modalpanel {
  /*background: linear-gradient(
    180deg,
    var(--panel),
    var(--panel-raise)
  ) !important;*/
  color: var(--ink) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.65) !important;
  width: min(760px, calc(100vw - 2rem)) !important;
  margin: 0 auto !important;
  padding: 1.25rem 1.25rem 1.5rem !important;
  overflow: hidden !important;
}
.ui.basic.modal .eg-modal__header {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Form fields in our dark modal panel */
.ui.basic.modal .eg-modalpanel .ui.form .field > label,
.ui.basic.modal .eg-modalpanel .ui.form .required.field > label {
  color: var(--muted) !important;
}
.ui.basic.modal .eg-modalpanel .ui.form input,
.ui.basic.modal .eg-modalpanel .ui.form textarea {
  background: #0f1216 !important;
  color: var(--ink) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  background-clip: padding-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.ui.basic.modal .eg-modalpanel .ui.form input::placeholder,
.ui.basic.modal .eg-modalpanel .ui.form textarea::placeholder {
  color: #808792 !important;
}
.ui.basic.modal .eg-modalpanel .ui.form input:focus,
.ui.basic.modal .eg-modalpanel .ui.form textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(202, 168, 102, 0.25);
  outline: none;
}

/* Dropdowns in modal */
.ui.basic.modal .eg-modalpanel .ui.selection.dropdown {
  background: #0f1216;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: var(--ink);
  border-radius: 12px;
  min-height: 44px;
}
.ui.basic.modal .eg-modalpanel .ui.selection.active.dropdown,
.ui.basic.modal .eg-modalpanel .ui.selection.active.dropdown .menu {
  border-color: var(--accent);
}
.ui.basic.modal .eg-modalpanel .ui.selection.dropdown .menu {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Specific override for country code dropdown in auth modal */
/*
.ui.basic.modal .eg-modalpanel .ui.selection.dropdown {
  background: none !important;
  min-height: none !important;
  border: none !important;
}
  */

#countryCodeDropdown .search input {
  background: none !important;
}

#phoneNumber {
    background: #0f1216 !important;
    color: var(--ink) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 12px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    background-clip: padding-box !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

/* Inline error prompts */
.ui.form .error.message,
.ui.form .inline.field .ui.red.pointing.label,
.ui.form .field .ui.red.pointing.label {
  background: rgba(255, 107, 107, 0.1) !important;
  color: #ffd3d3 !important;
  border-color: var(--danger) !important;
  font-weight: 600;
}
.ui.form .field .ui.red.pointing.label:before {
  border-color: var(--danger) transparent;
}




/* DO I NEED THIS?? */
.gold {
  background: linear-gradient(
    180deg,
    #d4b878 0%,
    #caa866 45%,
    #b78b42 100%
  ) !important;
  box-shadow: 0 0 0 2px #333 inset;
}

.gold.invt {
  border: none !important;
  background: linear-gradient(
    180deg,
    #101113 0%,
    #0a0a0a 45%,
    #424242 100%
  ) !important;
  color: var(--accent) !important;
  box-shadow: 0 0 0 2px #333 inset;
}


/* Shiny gold CTAs (only in our modal panel) */
.ui.basic.modal .eg-modalpanel .ui.primary.button,
.ui.basic.modal .eg-modalpanel .ui.primary.buttons .button {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #d4b878 0%,
    #caa866 45%,
    #b78b42 100%
  ) !important;
  background-size: 100% 200%;
  border: 1px solid #b28b4e !important;
  color: var(--accent-ink) !important;
  font-weight: 800;
  letter-spacing: 0.3px;
  border-radius: 14px;
  text-transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 6px 14px rgba(0, 0, 0, 0.35), 0 0 12px rgba(202, 168, 102, 0.25);
  transition: background-position 0.3s, box-shadow 0.25s, transform 0.12s;
}
.ui.basic.modal .eg-modalpanel .ui.primary.button:hover {
  background-position: 0 -100%;
  background: linear-gradient(
    180deg,
    #e1c98b 0%,
    #d1aa54 50%,
    #b88a41 100%
  ) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 10px 20px rgba(202, 168, 102, 0.45), 0 0 18px rgba(202, 168, 102, 0.4);
  transform: translateY(-1px);
}
.ui.basic.modal .eg-modalpanel .ui.primary.button:active {
  background: linear-gradient(180deg, #b78b42 0%, #a07832 90%) !important;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35),
    0 4px 10px rgba(0, 0, 0, 0.45);
  transform: translateY(1px);
}
.ui.basic.modal .eg-modalpanel .ui.primary.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 40%,
    rgba(255, 255, 255, 0) 80%
  );
  transition: left 0.75s ease;
}
.ui.basic.modal .eg-modalpanel .ui.primary.button:hover::before {
  left: 125%;
}
.ui.basic.modal .eg-modalpanel .ui.primary.button:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(202, 168, 102, 0.28),
    0 8px 20px rgba(202, 165, 100, 0.25) !important;
}












/* Info message example */
#signupNotice.ui.info.message {
  background: linear-gradient(
    180deg,
    rgba(56, 74, 91, 0.28),
    rgba(34, 45, 56, 0.35)
  ) !important;
  color: var(--ink-2) !important;
  border-color: #3a4c60 !important;
  border-radius: 12px !important;
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 767.98px) {
  body {
    overflow-x: hidden;
  }
  .hero {
    min-height: calc(var(--vh, 1vh) * 78);
    padding: calc(var(--vh, 1vh) * 14) 0 calc(var(--vh, 1vh) * 10);
  }
  .ui.secondary.menu .item {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
  .ui.secondary.menu .header.item img.ui.mini.image {
    width: 22px;
    height: auto;
  }
  .logo-wordmark {
    letter-spacing: 0.045em;
  }
  .ui.basic.modal .eg-modalpanel {
    width: calc(100vw - 1.25rem) !important;
    padding: 1rem !important;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero > video.hero-video {
    display: none !important;
  }
  .hero {
    background: #000;
  }
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Glass card ---------- */
.glass-card {
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 1rem !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.glass-card .content,
.glass-card .extra.content,
.glass-card .meta,
.glass-card .description,
.glass-card a,
.glass-card .header,
.glass-card a.header {
  color: #f0f0f0 !important;
}

/* Checkbox label contrast on dark inverted forms */
.ui.inverted.form .ui.toggle.checkbox input:checked ~ label {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Footer social icon hovers */
.site-footer .fa-brands {
  color: #fff !important;
  transition: color 0.2s ease;
}
.site-footer .fa-instagram:hover {
  color: #e1306c !important;
}
.site-footer .fa-x-twitter:hover {
  color: #ccc !important;
}
.site-footer .fa-youtube:hover {
  color: #ff0000 !important;
}
.site-footer .fa-facebook:hover {
  color: #1877F2 !important;
}

/* ---------- Global focus ring ---------- */
a:focus,
button:focus,
.ui.button:focus,
.ui.selection.dropdown:focus {
  outline: 2px solid var(--focus) !important;
  outline-offset: 2px !important;
}
.ui.form .field > input:hover,
.ui.input > input:hover,
.ui.selection.dropdown:hover {
  border-color: #36424e !important;
}

/* ---------- Auth footer strip ---------- */
.eg-auth-footer {
  background: #0c1014 !important;
  color: var(--muted) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
}
.eg-auth-footer a {
  color: var(--ink) !important;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: border-color 0.15s, opacity 0.15s;
  cursor: pointer;
}
.eg-auth-footer a:hover {
  border-bottom-color: currentColor;
  opacity: 0.9;
}
#header_link_signin,
#header_link_signup {
  cursor: pointer;
}








/* LET'S DELETE THIS AND REBUILD */







/* =========================================================
   Privacy Preferences modal (brand-consistent)
   ========================================================= */
#privacy_prefs_modal.ui.modal {
  background: transparent !important;
  filter: none !important;
  backdrop-filter: none !important;
}
#privacy_prefs_modal > .header,
#privacy_prefs_modal > .content,
#privacy_prefs_modal > .actions {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
#privacy_prefs_modal > .header {
  background: linear-gradient(180deg, var(--panel), var(--panel-raise));
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0.02em;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1rem 1.25rem !important;
  border-radius: 16px 16px 0 0;
}
#privacy_prefs_modal > .content {
  background: linear-gradient(180deg, var(--panel), var(--panel-raise));
  color: var(--ink);
  padding: 1.25rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#privacy_prefs_modal .ui.segment {
  background: #11161c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
  color: var(--ink) !important;
}
#privacy_prefs_modal h3,
#privacy_prefs_modal h4,
#privacy_prefs_modal .ui.header {
  color: var(--ink) !important;
  margin-bottom: 0.35rem !important;
}
#privacy_prefs_modal .u-muted,
#privacy_prefs_modal .description,
#privacy_prefs_modal .meta {
  color: var(--muted) !important;
}
#privacy_prefs_modal > .actions {
  background: var(--panel-raise) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 1rem 1.25rem !important;
  border-radius: 0 0 16px 16px;
}
#privacy_prefs_modal .ui.primary.button {
  background: linear-gradient(180deg, #d7b979, #caa866) !important;
  color: var(--accent-ink) !important;
  border: 1px solid #b9914f !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px;
  box-shadow: 0 8px 20px rgba(202, 165, 100, 0.25),
    inset 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.08s, box-shadow 0.18s, filter 0.12s;
}
#privacy_prefs_modal .ui.primary.button:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 26px rgba(202, 165, 100, 0.32) !important;
}
#privacy_prefs_modal .ui.primary.button:active {
  transform: translateY(1px);
}
#privacy_prefs_modal .ui.button.basic,
#privacy_prefs_modal #prefs_cancel.ui.button {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid #ffffff1f !important;
  color: var(--ink) !important;
  border-radius: 12px !important;
}

/* Toggles inside privacy modal */
#privacy_prefs_modal .ui.toggle.checkbox label {
  padding-left: 4.2rem !important;
  color: var(--ink) !important;
}
#privacy_prefs_modal .ui.toggle.checkbox label:before {
  width: 3.2rem;
  height: 1.6rem;
  border-radius: 999px;
  background: #24303b !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#privacy_prefs_modal .ui.toggle.checkbox label:after {
  width: 1.2rem;
  height: 1.2rem;
  top: 0.2rem;
  left: 0.2rem;
  border-radius: 999px;
  background: #e9edf2 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
#privacy_prefs_modal .ui.toggle.checkbox input:checked ~ label:before,
#privacy_prefs_modal .ui.toggle.checkbox.checked label:before {
  background: var(--accent) !important;
}
#privacy_prefs_modal .ui.toggle.checkbox input:checked ~ label:after,
#privacy_prefs_modal .ui.toggle.checkbox.checked label:after {
  left: 2rem;
  background: #fff !important;
}
#privacy_prefs_modal .is-required,
#privacy_prefs_modal .required-note {
  opacity: 0.7;
}
#privacy_prefs_modal .is-required .ui.toggle.checkbox {
  pointer-events: none;
}
#privacy_prefs_modal .ui.list > .item {
  padding: 0.6rem 0 !important;
}




















/* =========================================================
   Top Navigation (fixed) + Mobile Sidebar
   ========================================================= */
body {
  padding-top: 3.5rem;
}
.ui.top.fixed.menu.eg-topbar .header.item strong {
  letter-spacing: 0.04em;
}
.eg-topbar .item.spacer {
  flex: 1 1 auto;
}
@media (max-width: 767.98px) {
  .ui.top.fixed.menu.eg-topbar .item {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #egHamburger .icon {
    font-size: 1.25rem;
  }
}
#egMobileSidebar.ui.inverted.vertical.sidebar.menu .item {
  color: var(--ink) !important;
}
#egMobileSidebar.ui.inverted.vertical.sidebar.menu .header {
  color: var(--ink-2) !important;
  font-weight: 800;
  letter-spacing: 0.02em;
}
#egMobileSidebar.ui.inverted.vertical.sidebar.menu {
  background: linear-gradient(180deg, #0b0f14, #0f141a);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 40px var(--shadow-lg) !important;
}
#egMobileSidebar .menu .item {
  background: transparent !important;
}
.eg-topbar .header.item img.ui.mini.image,
#egMobileSidebar .item img.ui.mini.image {
  width: 24px;
  height: auto;
}
html,
body,
.pushable,
.pushable > .pusher {
  background: var(--bg) !important;
  color: var(--ink);
}

/* =========================================================
   Admin: Rallies (tables, cards, actions)
   ========================================================= */
#tblPresent td.collapsing,
#tblPast td.collapsing {
  white-space: nowrap;
}
#tblPresent td,
#tblPast td {
  vertical-align: middle;
}

.rally-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  background: #222;
  display: inline-block;
}
.rally-thumb.placeholder {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  opacity: 0.75;
}

.actions-menu .item {
  padding: 10px 14px !important;
}
.actions-menu .item i.icon {
  margin-right: 0.6em;
}

/* Mobile action row */
.actions-mobile {
  display: none !important;
}
@media (max-width: 768px) {
  #tblPresent thead,
  #tblPast thead {
    display: none;
  }
  #tblPresent tbody tr,
  #tblPast tbody tr {
    display: block;
    padding: 12px;
    margin: 12px 0;
    border-radius: 12px;
    background: #1b1c1d;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
      0 6px 14px rgba(0, 0, 0, 0.25);
  }
  #tblPresent tbody td,
  #tblPast tbody td {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    padding: 6px 0;
    border: none !important;
    white-space: normal;
  }
  #tblPresent tbody td[data-label="Image"],
  #tblPast tbody td[data-label="Image"] {
    grid-template-columns: 120px 56px;
  }
  #tblPresent tbody td::before,
  #tblPast tbody td::before {
    content: attr(data-label);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    letter-spacing: 0.2px;
  }
  #tblPresent tbody td[data-label="Actions"],
  #tblPast tbody td[data-label="Actions"] {
    grid-template-columns: 1fr auto;
  }
  .actions-desktop {
    display: none !important;
  }
  .actions-mobile {
    display: block !important;
    margin-top: 8px;
  }
}

/* Ensure desktop vs mobile visibility in card view */
#admin-rallies .actions-mobile {
  display: none !important;
  height: 0;
  overflow: hidden;
}
#admin-rallies .actions-desktop {
  display: inline-block !important;
}
@media (max-width: 768px) {
  #admin-rallies .actions-desktop {
    display: none !important;
  }
  #admin-rallies .actions-mobile {
    display: block !important;
    height: auto;
    overflow: visible;
    margin-top: 8px;
  }
  #admin-rallies .actions-mobile .menu.fluid {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 10px;
  }
}

/* New Rally modal preview image */
#newRallyModal #ImagePreview {
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

/* Modal close icon placement */
.ui.modal > .close.icon {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 10;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.25rem;
  cursor: pointer;
}
.ui.modal > .close.icon:hover {
  color: var(--ink);
  opacity: 0.9;
}

/* Native pickers (New Rally modal) */
#newRallyModal input[type="date"],
#newRallyModal input[type="datetime-local"],
#newRallyModal input[type="time"] {
  color-scheme: dark;
}
#newRallyModal input[type="date"]::-webkit-calendar-picker-indicator,
#newRallyModal input[type="datetime-local"]::-webkit-calendar-picker-indicator,
#newRallyModal input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.25);
  opacity: 0.95;
  background: transparent;
  cursor: pointer;
}

/* Rally cards */
#rallyList .rally-card,
#eventList .event-card {
  background: #11161c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
  padding: 14px 16px !important;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.06s;
}
#rallyList .rally-card:hover,
#eventList .event-card:hover {
  border-color: rgba(202, 168, 102, 0.28) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45) !important;
}
#rallyList .rally-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  background: #222;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
#rallyList .rally-thumb.placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8b96a3;
}
#rallyList .rally-card .header,
#eventList .event-card .header {
  color: var(--ink) !important;
  font-weight: 800;
  letter-spacing: 0.02em;
}
#rallyList .rally-card .meta,
#eventList .event-card .meta {
  color: var(--muted) !important;
}
#rallyList .u-muted {
  color: var(--muted) !important;
  font-size: 0.9rem;
}
#rallyList .extra.content .ui.header,
#eventList .extra.content .ui.header {
  color: var(--ink) !important;
  font-weight: 700;
}

/* ---------- Unified Switch Styling (Registration & Active) ----------
   Covers both the native :checked state and SUI's .checked class.
   Apply to .reg-open and .isActive (and future .eg-switch).
-------------------------------------------------------------------- */
#rallyList .reg-open.ui.checkbox label,
#rallyList .isActive.ui.checkbox label,
#rallyList .show-leaderboard.ui.checkbox label,
.eg-switch.ui.checkbox label {
  color: var(--ink) !important;
  padding-left: 2.4rem;
}
#rallyList .reg-open.ui.checkbox input ~ label:before,
#rallyList .isActive.ui.checkbox input ~ label:before,
#rallyList .show-leaderboard.ui.checkbox input ~ label:before,
.eg-switch.ui.checkbox input ~ label:before {
  width: 36px;
  height: 18px;
  top: 0.1rem;
  background: #24303b !important;
  border-radius: 999px;
  border: none !important;
}
#rallyList .reg-open.ui.checkbox input ~ label:after,
#rallyList .isActive.ui.checkbox input ~ label:after,
#rallyList .show-leaderboard.ui.checkbox input ~ label:after,
.eg-switch.ui.checkbox input ~ label:after {
  width: 14px;
  height: 14px;
  top: 0.3rem;
  left: 0.3rem;
  background: #e9edf2 !important;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Gold ON state — both native :checked and SUI .checked */
#rallyList .reg-open.ui.checkbox input:checked ~ label:before,
#rallyList .show-leaderboard.ui.checkbox input:checked ~ label:before,
#rallyList .reg-open.ui.checkbox.checked label:before,
#rallyList .show-leaderboard.ui.checkbox.checked label:before,
#rallyList .isActive.ui.checkbox input:checked ~ label:before,
#rallyList .isActive.ui.checkbox.checked label:before,
.eg-switch.ui.checkbox input:checked ~ label:before,
.eg-switch.ui.checkbox.checked label:before {
  background: var(--accent) !important;
}
#rallyList .reg-open.ui.checkbox input:checked ~ label:after,
#rallyList .reg-open.ui.checkbox.checked label:after,
#rallyList .show-leaderboard.ui.checkbox input:checked ~ label:after,
#rallyList .show-leaderboard.ui.checkbox.checked label:after,
#rallyList .isActive.ui.checkbox input:checked ~ label:after,
#rallyList .isActive.ui.checkbox.checked label:after,
.eg-switch.ui.checkbox input:checked ~ label:after,
.eg-switch.ui.checkbox.checked label:after {
  left: 1.25rem;
  background: #fff !important;
}

/* Status pill */
#rallyList .ui.label.blue,
#rallyList .ui.label.green,
#rallyList .ui.label.basic {
  border-radius: 999px !important;
  font-weight: 700;
  padding: 0.45rem 0.8rem !important;
}
#rallyList .ui.label.basic {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--muted) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

@media (max-width: 767.98px) {
  #rallyList .rally-card,
  #eventList .event-card,
  #articlesList .article-card {
    padding: 12px 12px !important;
  }
  #rallyList .extra.content .ui.stackable.equal.width.grid .column,
  #eventList .extra.content .ui.stackable.equal.width.grid .column,
  #articlesList .extra.content .ui.stackable.equal.width.grid .column {
    margin-bottom: 0.6rem;
  }
  #rallyList .actions-mobile,
  #eventList .actions-mobile,
  #articlesList .actions-mobile {
    margin-top: 0.25rem !important;
  }
}

/* =========================================================
   Delete Modals
   ========================================================= */
#deleteConfirmModal.ui.modal,
#deleteEventModal.ui.modal,
#deleteArticleModal.ui.modal,
#deleteCanonicalColorModal.ui.modal,
#deleteCarColorModal.ui.modal {
  background: rgba(10, 13, 17, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  color: var(--ink);
}
#deleteConfirmModal .ui.icon.header,
#deleteEventModal .ui.icon.header,
#deleteArticleModal .ui.icon.header,
#deleteCanonicalColorModal .ui.icon.header,
#deleteCarColorModal .ui.icon.header {
  color: var(--ink);
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.03em;
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}
#deleteConfirmModal .ui.icon.header i.icon,
#deleteEventModal .ui.icon.header i.icon,
#deleteArticleModal .ui.icon.header i.icon,
#deleteCanonicalColorModal .ui.icon.header i.icon,
#deleteCarColorModal .ui.icon.header i.icon {
  color: var(--accent);
  font-size: 2.4rem;
  margin-bottom: 0.35rem;
}
#deleteConfirmModal .content,
#deleteEventModal .content,
#deleteArticleModal .content,
#deleteCanonicalColorModal .content,
#deleteCarColorModal .content {
  text-align: center;
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.6;
}
#deleteConfirmModal .content strong.js-archive-name,
#deleteEventModal .content strong.js-archive-name,
#deleteArticleModal .content strong.js-archive-name,
#deleteCanonicalColorModal .content strong.js-archive-name,
#deleteCarColorModal .content strong.js-archive-name {
  color: var(--accent);
  font-weight: 700;
}
#deleteConfirmModal .actions,
#deleteEventModal .actions,
#deleteArticleModal .actions,
#deleteCanonicalColorModal .actions,
#deleteCarColorModal .actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
#deleteConfirmModal .ui.button,
#deleteEventModal .ui.button,
#deleteArticleModal .ui.button,
#deleteCanonicalColorModal .ui.button,
#deleteCarColorModal .ui.button {
  min-width: 130px;
  font-weight: 700;
  border-radius: 999px;
  transition: all 0.18s ease;
}
.ui.cancel.button {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--ink) !important;
}
.ui.cancel.button:hover {
  border-color: var(--accent);
  color: var(--accent) !important;
}
.ui.red.button {
  background: linear-gradient(180deg, #ff6b6b, #e64545) !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(230, 69, 69, 0.4);
}
.ui.red.button:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(230, 69, 69, 0.55);
}

/* ---------- TinyMCE polish ---------- */
.tox .tox-edit-area__iframe {
  border-radius: 12px;
}
.tox .tox-toolbar,
.tox .tox-toolbar__primary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tox-tinymce {
  position: relative !important;
  z-index: 3000 !important;
}
.tox.tox-tinymce,
.tox .tox-edit-area__iframe {
  pointer-events: auto !important;
}
/* =========================================================
   Fix: Dark Dropdown Text in Discount Codes Modal
   ========================================================= */
#discountCodesModal .ui.selection.dropdown,
#discountCodesModal .ui.selection.dropdown .menu,
#discountCodesModal .ui.selection.dropdown .item {
  background: #0f1216 !important;
  color: var(--ink) !important; /* visible text */
  border-color: rgba(255, 255, 255, 0.14) !important;
}
#discountCodesModal .ui.selection.dropdown .menu .item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
#discountCodesModal .ui.selection.dropdown .text:not(.default) {
  color: var(--ink) !important;
}
/* ===========================
   Discounts modal - list layout
   =========================== */
#discountCodesModal .dc-list {
  background: #12171d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
}

#discountCodesModal .dc-head,
#discountCodesModal .dc-row {
  display: grid;
  grid-template-columns: 1fr auto auto; /* code | amount | actions */
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

#discountCodesModal .dc-head {
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#discountCodesModal .dc-row {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#discountCodesModal .dc-empty {
  padding: 16px;
  color: var(--muted);
}

/* Cells */
#discountCodesModal .dc-code {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.02em;
}

#discountCodesModal .dc-amt {
  color: var(--ink);
  min-width: 80px;
  text-align: right;
}

#discountCodesModal .dc-actions {
  text-align: right;
}

/* Mobile layout: stack nicely */
@media (max-width: 640px) {
  #discountCodesModal .dc-head {
    display: none;
  }

  #discountCodesModal .dc-row {
    grid-template-columns: 1fr auto; /* code | amount */
    grid-template-areas:
      "code amt"
      "actions actions";
    row-gap: 6px;
  }
  #discountCodesModal .dc-code {
    grid-area: code;
  }
  #discountCodesModal .dc-amt {
    grid-area: amt;
  }
  #discountCodesModal .dc-actions {
    grid-area: actions;
    text-align: right;
  }
}

/* Keep dropdowns readable in dark modal (you mentioned dark text) */
#discountCodesModal .ui.selection.dropdown,
#discountCodesModal .ui.selection.dropdown .menu {
  background: #0f1216 !important;
  color: var(--ink) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
#discountCodesModal .ui.selection.dropdown .item {
  color: var(--ink) !important;
}
/* Discount Codes list (force horizontal) */
.dc-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* FORCE row to be flex, no wrapping */
.dc-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem;
  background: #0e141b;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  min-height: 3.1rem; /* matches tiny button height */
}

/* left text */
.dc-code {
  flex: 1 1 auto;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

/* amount in the middle/right */
.dc-amt {
  flex: 0 0 auto;
  color: #d0d4da;
  font-weight: 500;
  text-align: center !important;
}

/* right actions — force flex + center */
.dc-actions {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* button should not stretch */
.dc-actions .ui.button {
  margin: 0 0.25em 0 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
/* subtle gold divider between rows */
.dc-row + .dc-row {
  border-top: 1px solid rgba(202, 168, 102, 0.25); /* gold accent line */
  margin-top: 0.25rem;
  padding-top: 1rem;
}

/* optional hover glow effect */
.dc-row:hover {
  background: #141b23;
  box-shadow: 0 0 0.5rem rgba(202, 168, 102, 0.15);
  transition: all 0.2s ease;
}

/* =========================================================
   Cancel / Close Buttons — Unified Styling
   ========================================================= */

.ui.basic.inverted.button,
.ui.basic.compact.inverted.button {
  background: transparent !important;
  color: #e6e6e6 !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 999px !important; /* pill shape */
  font-weight: 600 !important;
  padding: 0.7rem 1.5rem !important;
  transition: all 0.25s ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
}

.ui.basic.inverted.button:hover,
.ui.basic.compact.inverted.button:hover {
  border-color: var(--accent, #caa866) !important;
  color: var(--accent, #caa866) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 0 12px rgba(202, 168, 102, 0.25) !important; /* soft gold glow */
}

.ui.basic.inverted.button:active,
.ui.basic.compact.inverted.button:active {
  transform: scale(0.97);
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Specifically tighten up spacing for the Close button in discountCodesModal */
#discountCodesCancel {
  margin-top: 0.75rem;
  margin-right: 0.5rem;
}
/* =========================================================
   Confirm Delete (Yes, Delete) — Unified Styling
   ========================================================= */

/* Red confirm buttons (Yes, Delete) */
.ui.red.button,
.ui.red.compact.button,
.ui.red.tiny.button,
.ui.red.mini.button {
  background: linear-gradient(180deg, #ff5a5a 0%, #e93c3c 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important; /* pill shape */
  font-weight: 600 !important;
  padding: 0.75rem 1.75rem !important;
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.25) !important;
  transition: all 0.25s ease !important;
}

.ui.red.button:hover,
.ui.red.compact.button:hover,
.ui.red.tiny.button:hover {
  background: linear-gradient(180deg, #ff6f6f 0%, #f24d4d 100%) !important;
  box-shadow: 0 6px 16px rgba(255, 0, 0, 0.35) !important;
  transform: translateY(-1px);
}

.ui.red.button:active,
.ui.red.compact.button:active,
.ui.red.tiny.button:active {
  transform: scale(0.97);
  background: linear-gradient(180deg, #e93c3c 0%, #c83232 100%) !important;
  box-shadow: 0 2px 8px rgba(255, 0, 0, 0.25) !important;
}
/* =========================================================
   Confirm Modals — Center Alignment + Button Layout
   ========================================================= */

#dcConfirmModal .eg-modal__content,
#deleteConfirmModal .eg-modal__content {
  text-align: center;
}

#dcConfirmModal .actions,
#deleteConfirmModal .actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem; /* even spacing between Cancel and Delete */
  margin-top: 1.5rem;
}

/* Make sure buttons look symmetrical */
#dcConfirmModal .ui.button,
#deleteConfirmModal .ui.button {
  min-width: 130px;
}
/* =========================================================
   Modal Header (Gold Trash Icon, No Divider)
   ========================================================= */

/* Center-align modal headers consistently */
#dcConfirmModal .eg-modal__header,
#deleteConfirmModal .eg-modal__header {
  text-align: center;
  border-bottom: none !important; /* remove line divider */
  margin-bottom: 0.75rem !important;
  padding-bottom: 0 !important;
}

/* Gold trash icon match */
.eg-icon-gold {
  color: var(--accent, #caa866) !important;
  font-size: 3.5rem !important;
  margin-bottom: 0.25rem !important;
}

/* Modal title consistency */
#dcConfirmModal .ui.header .content,
#deleteConfirmModal .ui.header .content {
  font-weight: 700;
  font-size: 1.75rem;
  color: #f2f2f2;
}

/* Optional: soften spacing on confirm modals */
#dcConfirmModal .eg-modal__content p {
  margin-top: 0.75rem;
}
.ui.file.input {
  display: flex;
  align-items: center;
}
.ui.file.input label {
  margin-bottom: 0 !important;
}

.ui.label.eg-gold-label,
.ui.tiny.inverted.violet.label.eg-gold-label {
  background: var(--accent) !important; /* #caa866 */
  color: var(--accent-ink) !important; /* #111 */
  border: none !important;
  box-shadow: 0 0 10px rgba(202, 168, 102, 0.35);
  font-weight: 600;
  margin: 1em 0 1em 0;
}

.eg-edit-btn {
  background: var(--panel-elev) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 0.75rem 1.75rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.25s ease !important;
  font-size: 0.8rem;
}

.eg-edit-btn:hover {
  background: var(--accent) !important; /* bright gold */
  color: var(--accent-ink) !important; /* dark ink */
  box-shadow: 0 0 8px rgba(202, 168, 102, 0.45);
}

.eg-delete-btn {
  background: linear-gradient(
    180deg,
    #ff5a5a 0%,
    #e93c3c 100%
  ) !important; /* deep crimson */
  color: #fff !important; /* soft neon red accent */
  border: 1px solid #ff6b6b !important;
  font-weight: 600;
  transition: 0.2s ease;
}

.eg-delete-btn:hover {
  background: #ff6b6b !important;
  color: #111 !important;
  box-shadow: 0 0 8px rgba(255, 107, 107, 0.5);
}
/* Plain-text link for inline actions (no button look) */
.u-ghostlink {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.25);
  padding: 0 0.15rem;
  cursor: pointer;
}
.u-ghostlink:hover {
  border-bottom-color: rgba(255, 255, 255, 0.55);
}
.u-ghostlink:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-bottom-color: transparent;
  border-radius: 0.25rem;
}
/* Accent button in dark theme */
.btn-accent {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: 0 !important;
}
.btn-accent:hover {
  opacity: 0.95;
}

.eg-community-card.ui.card {
  background: #0c0c0c;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.eg-community-card .content .header {
  color: #fff;
}
.eg-community-card .content .meta span {
  color: rgba(255, 255, 255, 0.65);
}
.eg-community-card .description {
  color: rgba(255, 255, 255, 0.85);
}
.eg-community-card img {
  object-fit: cover;
  height: 220px;
  width: 100%;
}

.event-link {
  color: white !important;
  margin: 50px 0 0 0;
}

/* Layout */
.eg-events {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.25rem;
}
.eg-events__left {
  min-width: 0;
}
.eg-events__right {
  min-width: 0;
}
.eg-card {
  background: none !important;
  backdrop-filter: blur(6px);
  border: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  padding: 0rem 1rem 1.25rem;
}
.eg-card__hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.eg-card__title {
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
}

/* Gold Accent */
.eg-gold {
  color: #d6b25e;
}
.eg-chip {
  background: rgba(214, 178, 94, 0.12);
  color: #f2dba4;
  border: 1px solid rgba(214, 178, 94, 0.3);
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
}

/* Calendar sizing */
#egMonthCalendar {
  min-height: 680px;
}

/* Side list */
.eg-side-list {
  max-height: 680px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.eg-event-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.75rem;
}
.eg-event-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.eg-event-thumb {
  width: 56px;
  height: 56px;
  border-radius: 0.5rem;
  object-fit: cover;
  background: #1a1a1f;
}
.eg-event-title {
  font-weight: 600;
}
.eg-event-meta {
  font-size: 0.85rem;
  opacity: 0.9;
}

/* Filters */
.eg-filters .field {
  margin-bottom: 0.5rem;
}
.eg-filters .ui.action.input input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .eg-events {
    grid-template-columns: 1fr;
  }
  .eg-side-list {
    max-height: none;
  }
}

/* =========================================================
   Events Page: Calendar & List (Dark Theme Unification)
   ========================================================= */
/* Filters (global for Events page) */
.eg-filters .ui.input > input,
.eg-filters .ui.form input:not([type="checkbox"]),
.eg-filters .ui.selection.dropdown,
.eg-filters .ui.search > .prompt {
  background: #0f1216 !important;
  color: var(--ink) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
.eg-filters .ui.dropdown .menu {
  background: #0f1216 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.eg-filters .ui.dropdown .menu > .item {
  color: var(--ink) !important;
}
.eg-filters .ui.dropdown .menu > .item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* FullCalendar theming */
.fc-theme-standard .fc-scrollgrid,
.fc-theme-standard td,
.fc-theme-standard th {
  border-color: var(--line-soft);
}

.fc .fc-toolbar-title {
  color: var(--ink);
}
.fc .fc-col-header-cell,
.fc .fc-daygrid-day,
.fc .fc-timegrid-slot {
  background: var(--panel);
  color: var(--ink);
}

.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number {
  color: var(--muted);
}

/* Today highlight with gold glow */
.fc .fc-daygrid-day.fc-day-today {
  background: linear-gradient(
    0deg,
    rgba(202, 168, 102, 0.1),
    rgba(202, 168, 102, 0.03)
  );
  box-shadow: inset 0 0 0 1px rgba(202, 168, 102, 0.35);
}

/* Calendar navigation buttons */
.fc .fc-button-primary {
  background: #141a1f;
  border-color: var(--line-soft);
  color: var(--ink);
}
.fc .fc-button-primary:hover {
  filter: brightness(1.1);
}
.fc .fc-button-primary:disabled {
  opacity: 0.6;
}

/* Event chips/bars */
.fc .fc-event,
.fc .fc-daygrid-event {
  background: rgba(202, 168, 102, 0.16);
  border: 1px solid rgba(202, 168, 102, 0.42);
  color: #f3e5bb;
  border-radius: 8px;
}
.fc .fc-h-event .fc-event-main {
  color: #f3e5bb;
}
.fc .fc-event:hover {
  filter: brightness(1.06);
}

/* Popovers/tooltips */
.fc-theme-standard .fc-popover {
  background: #0f1318;
  color: var(--ink);
  border-color: var(--line-soft);
}
.fc-theme-standard .fc-popover-header {
  background: #0e1217;
  color: var(--muted);
}

/* Now indicator (time views) */
.fc .fc-timegrid-now-indicator-line {
  border-color: #ff5468;
}

/* Side list polishing */
.eg-side-list .eg-event-item {
  background: transparent;
  border: 1px solid transparent;
}
.eg-side-list .eg-event-item:hover {
  background: #12171d;
  border-color: rgba(255, 255, 255, 0.06);
}
.eg-event-thumb {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.eg-event-title {
  color: var(--ink);
}
.eg-event-meta {
  color: var(--muted);
}
/* =========================================================
Calendar & Events List (Dark Theme Enhancements)
========================================================= */

/* Higher contrast hover for event bars */
.fc .fc-event,
.fc .fc-daygrid-event {
  background: rgba(202, 168, 102, 0.25) !important;
  border: 1px solid rgba(202, 168, 102, 0.55) !important;
  color: var(--accent) !important;
  transition: all 0.2s ease-in-out;
}

.fc .fc-event:hover,
.fc .fc-daygrid-event:hover {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  box-shadow: 0 0 12px rgba(202, 168, 102, 0.5) !important;
  border-color: var(--accent) !important;
  transform: translateY(-1px);
}

/* Improve today highlight */
.fc .fc-day-today {
  background: linear-gradient(
    0deg,
    rgba(202, 168, 102, 0.08),
    rgba(202, 168, 102, 0.02)
  ) !important;
  box-shadow: inset 0 0 0 1px rgba(202, 168, 102, 0.4);
}

/* Print-friendly month view */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .ui.menu,
  .ui.top.fixed.menu,
  .ui.button,
  .ui.input,
  .ui.dropdown,
  .eg-filters,
  .eg-side-list {
    display: none !important;
  }
  #egMonthCalendar,
  .fc {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  .fc .fc-daygrid-day-number,
  .fc .fc-col-header-cell-cushion {
    color: #000 !important;
  }
  .fc .fc-event {
    background: #d4af37 !important;
    color: #000 !important;
    border: 1px solid #000 !important;
  }
  .fc-toolbar-chunk,
  .fc-toolbar-title {
    color: #000 !important;
  }
}
#egCalPrint {
  cursor: pointer;
}
/* Layout for event list items */
.eg-side-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.eg-thumb-wrap {
  flex-shrink: 0;
  text-align: left;
}

.eg-event-thumb {
  border-radius: 6px;
  display: block;
}

.eg-thumb-wrap .ui.label {
  display: inline-block;
  margin-top: 0.35rem;
}

/* Info block on the right */
.eg-side-info {
  flex: 1;
  color: var(--ink);
}

.eg-side-title {
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.eg-side-date {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin-bottom: 0.4rem;
}

.eg-side-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.4;
}
.eg-cal-title {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.5em;
  white-space: normal;
}
/* Make calendar events show a pointer on hover */
.fc-event {
  cursor: pointer;
}
/* ---------- Print Icon & Label Hover (with Glow) ---------- */
#egCalPrint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  transition: color 0.25s ease, text-shadow 0.25s ease;
  cursor: pointer;
}
#egCalPrint i.icon {
  transition: color 0.25s ease, transform 0.25s ease, text-shadow 0.25s ease;
}
#egCalPrint:hover {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(202, 168, 102, 0.45);
}
#egCalPrint:hover i.icon {
  color: var(--accent);
  transform: scale(1.15);
  text-shadow: 0 0 10px rgba(202, 168, 102, 0.55);
}
#toggleFilters.ui.icon.button {
  background: var(--panel-elev);
  color: var(--ink);
  border: 1px solid var(--line-soft);
  transition: all 0.25s ease;
}
#toggleFilters.ui.icon.button:hover {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 8px rgba(202, 168, 102, 0.4);
}
/* ---------- Submit Event Button (Dark Theme) ---------- */
#openSubmitEvent.ui.inverted.button {
  background: var(--panel-elev);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-weight: 600;
  letter-spacing: 0.5px;
  margin: 2em 0;
  transition: all 0.25s ease;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

#openSubmitEvent.ui.inverted.button:hover {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 12px rgba(202, 168, 102, 0.55);
  transform: translateY(-1px);
}

#openSubmitEvent.ui.inverted.button i.icon {
  margin-right: 0.5rem;
  transition: transform 0.25s ease;
}

#openSubmitEvent.ui.inverted.button:hover i.icon {
  transform: scale(1.15) rotate(15deg);
}
/* =========================================================
End of Calendar Enhancements
========================================================= */

#rally {
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* translucent panels on top of the background */
#rally .ui.inverted.vertical.segment,
#rally .ui.inverted.segment,
#rally .card {
  background: rgba(5, 8, 12, 0.6);
  backdrop-filter: blur(6px);
  border-color: rgba(255, 255, 255, 0.1);
}

.ui.inverted.vertical.segment.eg-section {
  border-radius: 1rem 1rem 0 0;
  background: rgba(0, 0, 0, 0.65) !important; /* darker glass */
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
}

#rallyDetailsSidebar,
#rallyDetailsSidebar .segment {
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.15) !important; /* darker glass */
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
}
/* Registered drivers list on rally page */
.eg-rally-drivers-list {
  max-height: 18rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.eg-rally-drivers-empty {
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

/* ---------- Leaderboard ---------- */
.eg-leaderboard .item {
  display: flex !important;
  align-items: center !important;
}

.eg-leaderboard .item .rank {
  font-size: 1.35rem;
  font-weight: 700;
  width: 3rem;
  text-align: center;
  color: var(--accent);
}

.eg-leaderboard .avatar {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  object-fit: cover;
  margin-right: 1rem;
}

.eg-leaderboard .name {
  font-size: 1.1rem;
  font-weight: 600;
}

.eg-leaderboard .car {
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.eg-leaderboard .points {
  margin-left: auto;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink-2);
}
.eg-leaderboard.ui.segment {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.eg-leaderboard-row:hover {
  background: rgba(0, 0, 0, 0.15) !important;
  border-color: var(--accent);
  transform: translateY(-2px);
}
/* ---------- Rally Leaderboard (4-column grid) ---------- */

.eg-leaderboard-table {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* One row = 4 columns:
   1) Place  2) Thumbnail  3) Info  4) Points
*/
.eg-leaderboard-row {
  display: grid;
  grid-template-columns:
    minmax(2.5rem, 3.2rem) /* place */
    minmax(3.2rem, 4rem) /* thumb */
    minmax(0, 1fr) /* driver + car */
    minmax(3.5rem, 5rem); /* points */
  column-gap: 0.9rem;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.eg-leaderboard-row:last-child {
  border-bottom: none;
}

/* Columns are all left-aligned */
.eg-col {
  text-align: left;
}

/* Place / rank */
.eg-col-rank {
  font-weight: 700;
  color: var(--accent);
  font-size: 1.05rem;
}

/* Thumb */
.eg-col-thumb {
  display: flex;
  align-items: center;
}

.eg-leaderboard-thumb {
  width: 3rem;
  height: 3rem;
  border-radius: 0.4rem;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Driver + car */
.eg-col-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.eg-leaderboard-name {
  font-weight: 600;
  color: var(--ink-2);
  font-size: 1rem;
}

.eg-leaderboard-car {
  font-size: 0.9rem;
  color: var(--ink-muted);
}

/* Points */
.eg-col-points {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink-2);
}

/* Small screens: keep 4 columns but let them breathe a bit */
@media (max-width: 767px) {
  .eg-leaderboard-row {
    grid-template-columns:
      minmax(2.4rem, 2.8rem)
      minmax(3rem, 3.4rem)
      minmax(0, 1fr)
      minmax(3.2rem, 4.2rem);
    column-gap: 0.6rem;
    background: rgba(0, 0, 0, 0) !important;
  }

  .eg-leaderboard-name {
    font-size: 0.95rem;
  }
  .eg-leaderboard-car {
    font-size: 0.85rem;
  }
}
/* =========================================================
   Rallies Page — Button Styling
   ========================================================= */
.eg-rally-btn,
.eg-rally-btn:link,
.eg-rally-btn:visited {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--accent);
  color: var(--accent) !important; /* <— this ensures GOLD text */
  border-radius: 999px; /* pill */
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.25s ease;
  background: transparent;
  text-decoration: none; /* Remove link underline */
}

.eg-rally-btn:hover {
  background: var(--accent);
  color: #111 !important; /* <— readable on gold background */
  box-shadow: 0 0 12px rgba(202, 168, 102, 0.4);
  text-decoration: none;
}

/* =========================================================
   Rallies & Events Page: Action Buttons
   ========================================================= */
/* ---------- Hero ---------- */
.eg-rally-hero {
  position: relative;
  margin-bottom: 2.5rem;
  border-radius: 1.25rem;
  padding: 2.5rem 2.5rem 2.75rem;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 0 24px 40px var(--shadow-lg);
  overflow: hidden;
}
.eg-rally-hero__inner {
  max-width: 720px;
}
.eg-rally-hero__kicker {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.eg-rally-hero__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
  line-height: 1.1em;
}
.eg-rally-hero__meta {
  font-size: 0.95rem;
  color: var(--ink-muted);
  margin-bottom: 1rem;
}
.eg-rally-hero__desc {
  font-size: 0.95rem;
  color: var(--ink-2);
  margin-bottom: 1.5rem;
}
.eg-rally-hero__cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ---------- Sponsors Column ---------- */
.eg-rally-sponsors__hdr {
  margin-bottom: 1rem;
}
.eg-rally-sponsors__title {
  font-size: 1rem;
  font-weight: 600;
}
.eg-rally-sponsors__subtitle {
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.eg-rally-sponsors__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
}
.eg-rally-sponsors__pill {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  background: rgba(10, 13, 17, 0.8);
  backdrop-filter: blur(4px);
}

/* ---------- Buttons override (Option A) ---------- */
.eg-rally-btn,
.eg-rally-btn:link,
.eg-rally-btn:visited {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--accent);
  color: var(--accent) !important;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.25s ease;
  background: transparent;
  text-decoration: none;
}
.eg-rally-btn:hover {
  background: var(--accent);
  color: #111 !important;
  box-shadow: 0 0 12px rgba(202, 168, 102, 0.4);
  text-decoration: none;
}

/* ---------- Sponsors Column ---------- */
.eg-rally-sponsors {
  margin-bottom: 2rem;
  padding: 1.5rem 1.5rem 1.25rem;
}

/* Article page - rally details box */
/* ---------------------------------------------------------
   Articles Modal + TinyMCE
   --------------------------------------------------------- */
.eg-article-modal .content {
  max-height: 70vh;
  overflow-y: auto;
}

.eg-article-modal .mce-tinymce {
  border-radius: 0.75rem;
}

.eg-article-modal .mce-statusbar {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* ---------------------------------------------------------
   Articles Modal - Dark Theme
   --------------------------------------------------------- */
.ui.modal.eg-article-modal {
  background: var(--panel);
  color: var(--ink);
}

.ui.modal.eg-article-modal > .header {
  background: var(--panel-elev);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}

.ui.modal.eg-article-modal > .content {
  background: var(--panel);
}

.ui.modal.eg-article-modal .actions {
  background: var(--panel-elev);
  border-top: 1px solid var(--line-soft);
}

/* Inputs in the modal */
.eg-article-modal .ui.form input[type="text"],
.eg-article-modal .ui.form input[type="file"] {
  background: var(--panel-elev);
  border-color: var(--line-soft);
  color: var(--ink);
}

.eg-article-modal .ui.form input::placeholder {
  color: var(--ink-muted);
}

/* TinyMCE chrome tweaks */
.eg-article-modal .tox.tox-tinymce {
  border-radius: 0.75rem;
  box-shadow: none;
}

.eg-article-modal .tox .tox-statusbar {
  border-top: 1px solid var(--line-soft);
}
/* =========================================================
   Articles Modal — Gold Theme Overrides
   ========================================================= */

/* ---------- Toggle Switch (ON state) ---------- */
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ label:before {
  background-color: var(--accent) !important;
}

.ui.toggle.checkbox input:checked ~ .box:after,
.ui.toggle.checkbox input:checked ~ label:after {
  background-color: var(--ink-2) !important;
  left: 1.75rem !important;
}

/* ---------- Save Button (Primary) ---------- */
.eg-article-modal .actions .primary.button {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  font-weight: 600;
}

.eg-article-modal .actions .primary.button:hover {
  background: #d6b676 !important; /* slightly lighter gold on hover */
  color: var(--accent-ink) !important;
}

/* ---------- TinyMCE Toolbar: Active / Hover gold accents ---------- */
.eg-article-modal .tox .tox-tbtn:hover,
.eg-article-modal .tox .tox-tbtn:focus {
  background-color: rgba(202, 168, 102, 0.16) !important;
}

.eg-article-modal .tox .tox-tbtn--enabled,
.eg-article-modal .tox .tox-tbtn--enabled:hover {
  background-color: rgba(202, 168, 102, 0.32) !important;
}

.eg-article-modal .tox .tox-tbtn svg {
  fill: var(--ink-muted) !important;
}

.eg-article-modal .tox .tox-tbtn--enabled svg {
  fill: var(--accent) !important;
}

/* TinyMCE toolbar border highlight on focus */
.eg-article-modal .tox-editor-header {
  border-bottom: 1px solid var(--accent) !important;
}
/* TinyMCE editor body matches dark theme */
.eg-article-modal .tox.tox-tinymce {
  border-radius: 0.75rem;
  box-shadow: none;
}

.eg-article-modal .tox .tox-statusbar {
  border-top: 1px solid var(--line-soft);
}
/* =========================================================
   Admin &mdash; Articles Actions
   ========================================================= */
.eg-articles-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
}

.eg-articles-actions .ui.button {
  background: var(--panel-elev);
  color: var(--ink);
  border-radius: 0.75rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
}

.eg-articles-actions .ui.button:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

.eg-articles-actions .eg-btn-delete {
  background: var(--danger);
  color: var(--ink);
}

.eg-articles-actions .eg-btn-delete:hover {
  filter: brightness(1.1);
}
/* =========================================================
   Articles: Public List
   ========================================================= */
.eg-articles-list {
  margin-top: 1.5rem;
}

.eg-article-card {
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  border-radius: 1rem;
  background: var(--panel-raise);
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.eg-article-card__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.eg-article-title, .eg-article-title a {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--accent);
}

.eg-article-meta {
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.eg-article-excerpt {
  font-size: 0.95rem;
  color: var(--muted);
}

.eg-article-actions {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}








.eg-article-actions,
.actions-desktop {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.eg-article-actions .ui.button,
.actions-desktop .ui.button,
.actions-mobile .ui.button {
  background: var(--panel-elev);
  color: var(--ink);
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 0.75rem 1.75rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.25s ease !important;
  font-size: 0.8rem;
}

.eg-article-actions .ui.button:hover,
.actions-desktop .ui.button:hover,
.actions-mobile .ui.button:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

.eg-article-actions .eg-btn-delete-article,
.actions-desktop .eg-btn-delete-rally,
.actions-mobile .eg-btn-delete-rally {  
  background: var(--danger);
}

.eg-article-actions .eg-btn-delete-article:hover {
  filter: brightness(1.1);
}









.eg-article-body {
  margin-top: 1rem;
  color: var(--ink);
  line-height: 1.6;
}
/* =========================================================
   Articles — Public Detail Layout
   ========================================================= */
.eg-article-detail-wrap{
  margin: 0 auto 3rem;
}

.eg-article-detail{
  background: var(--panel-raise);
  border-radius: 1.25rem;
  border: 1px solid var(--line-soft);
  padding: 1.75rem 1.9rem 2rem;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}

/* Header block: title + date */
.eg-article-detail__header{
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.eg-article-detail__title{
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0 0 .35rem;
  color: var(--ink-2);
}

.eg-article-detail__meta{
  font-size: .9rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .16em;
}

/* Featured image */
.eg-article-detail__image{
  margin-bottom: 1.5rem;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 32px rgba(0,0,0,.6);
}

.eg-article-detail__image img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Body content (TinyMCE output) */
.eg-article-detail__body{
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}

.eg-article-detail__body p{
  margin-bottom: 1rem;
}

h2.eg-article-detail__body,
.eg-article-detail__body h3,
.eg-article-detail__body h4{
  color: var(--accent) !important;
  font-size: 1.5em !important;
  margin-top: 1.5rem;
  margin-bottom: .5rem;
}

.eg-article-detail__body a{
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px dotted rgba(127,181,255,.6);
}

.eg-article-detail__body a:hover{
  opacity: .9;
  border-bottom-style: solid;
}

/* Mobile tweaks */
@media (max-width: 767.98px){
  .eg-article-detail{
    padding: 1.25rem 1.1rem 1.6rem;
    border-radius: 1rem;
  }
  .eg-article-detail__title{
    font-size: 1.5rem;
  }
}
/* =========================================================
   Articles — Back Button (Ghost Button Style)
   ========================================================= */
.eg-back-btn{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.45rem .85rem;
  background:transparent;
  border:1px solid var(--line-soft);
  border-radius:.65rem;
  color:var(--ink-muted);
  text-decoration:none;
  font-size:.85rem;
  transition:all .2s ease;
}

.eg-back-btn i.icon{
  opacity:.7;
  transition:opacity .2s ease;
}

.eg-back-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
}

.eg-back-btn:hover i.icon{
  opacity:1;
  color:var(--accent);
}
/* =========================================================
   Articles — Detail View + Back Link
   ========================================================= */

/* Back to Articles pill */
.eg-article-backlink{
  margin: 0 0 1.25rem 0;
}

.eg-back-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.4rem .85rem;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(10,13,17,.85);
  color:var(--muted);
  text-decoration:none;
  margin: 0 0 1.5rem 0;
}

.eg-back-btn i.icon{
  font-size:.9rem;
  opacity:.9;
}

.eg-back-btn:hover{
  color:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 10px rgba(202,168,102,.35);
}

/* Main article card */
.eg-article-detail-wrap{
  margin:0 auto 2.5rem;
}

.eg-article-detail{
  background:var(--panel-raise);
  border-radius:1.25rem;
  border:1px solid var(--line-soft);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  padding:1.75rem 1.9rem 2.25rem;
}

/* Header block: title + meta */
.eg-article-detail__header{
  margin-bottom:1.25rem;
  padding-bottom:.9rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.eg-article-detail__title{
  font-size:1.65rem;
  line-height:1.25;
  margin:0 0 .35rem 0;
  color:var(--ink-2);
}

.eg-article-detail__meta{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--ink-muted);
}

/* Featured image */
.eg-article-detail__image{
  margin:1.25rem -0.25rem 0;
}

.eg-article-detail__image img{
  display:block;
  width:100%;
  border-radius:1rem;
  box-shadow:0 14px 36px rgba(0,0,0,.6);
}

/* Body copy */
.eg-article-detail__body{
  margin-top:1.5rem;
  font-size:.98rem;
  line-height:1.7;
  color:var(--ink);
}

.eg-article-detail__body p{
  margin:0 0 1rem;
}

.eg-article-detail__body h2,
.eg-article-detail__body h3,
.eg-article-detail__body h4{
  margin:1.4rem 0 .4rem;
  color:var(--ink-2);
}

/* Sidebar card alignment */
.eg-article-detail-wrap + .four.wide.column .eg-card{
  margin-top:.15rem;
}

/* Mobile: let the article breathe edge-to-edge a bit more */
@media (max-width: 767.98px){
  .eg-article-detail-wrap{
    max-width:none;
    margin:0 0 2rem;
  }
  .eg-article-detail{
    padding:1.25rem 1.15rem 1.8rem;
    border-radius:1rem;
  }
}
.eg-rally-img {
  border-radius: 1rem;
}

/* =========================================================
   Admin — Users (Cards + Modal)
   ========================================================= */

/* Top bar spacing */
#adminUsers.section {
  padding-top: 2.5rem;
}

/* User cards grid */
.eg-user-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;
  margin-top:1.5rem;
}

/* Individual user card */
.eg-user-card{
  display:flex;
  align-items:center;
  padding:0.9rem 1rem;
  border-radius:1rem;
  background:var(--panel-raise);
  border:1px solid var(--line-soft);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.eg-user-card:hover{
  transform:translateY(-2px);
  border-color:rgba(202,168,102,.35);
  box-shadow:0 16px 32px rgba(0,0,0,.5);
  background:linear-gradient(135deg,#10151b,#111822);
}

/* Avatar circle */
.eg-user-card__avatar{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:999px;
  background:linear-gradient(135deg,#232b36,#161d26);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-2);
  font-weight:700;
  font-size:.9rem;
  margin-right:.9rem;
}

/* Main text */
.eg-user-card__main{
  min-width:0;
}
.eg-user-card__name{
  font-weight:600;
  color:var(--ink-2);
  font-size:.98rem;
  margin-bottom:.1rem;
}
.eg-user-card__sub{
  font-size:.85rem;
  color:var(--ink-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.eg-user-card__meta{
  margin-top:.25rem;
  font-size:.78rem;
  color:var(--muted);
}

/* Status pill on card */
.eg-user-card__status{
  display:inline-flex;
  align-items:center;
  padding:.1rem .55rem;
  border-radius:999px;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-left:.35rem;
}
.eg-user-card__status--active{
  background:rgba(46,204,113,.12);
  color:#7be6a9;
  border:1px solid rgba(46,204,113,.45);
}
.eg-user-card__status--pending{
  background:rgba(241,196,15,.12);
  color:#f7e39a;
  border:1px solid rgba(241,196,15,.45);
}
.eg-user-card__status--disabled{
  background:rgba(231,76,60,.12);
  color:#ff9d9d;
  border:1px solid rgba(231,76,60,.45);
}

/* Top controls row (New, search, filter) */
.eg-user-controls{
  margin-bottom:1.5rem;
}
.eg-user-controls .ui.input > input{
  background:#0f1216 !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:var(--ink) !important;
}

/* Modal: overall */
#userEditModal.ui.modal{
  background:rgba(0,0,0,.6) !important;
}
#userEditModal .header.eg-user-modal__header{
  background:var(--panel-elev) !important;
  border-bottom:1px solid var(--line-soft) !important;
  color:var(--ink) !important;
}
#userEditModal .content.eg-user-modal__content{
  background:var(--panel) !important;
  color:var(--ink);
}

/* Sticky summary bar inside modal (keeps name visible) */
.eg-user-modal__summary{
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}
.eg-user-modal__summary-main{
  display:flex;
  align-items:center;
  gap:.8rem;
}
.eg-user-modal__summary-avatar{
  width:40px;
  height:40px;
  border-radius:999px;
  background: var(--accent);
  color: var(--panel);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}
.eg-user-modal__summary-text{
  display:flex;
  flex-direction:column;
}
.eg-user-modal__summary-name{
  font-weight:600;
  font-size:1.05rem;
}
.eg-user-modal__summary-sub{
  font-size:.8rem;
  color:var(--ink-muted);
}

/* Action buttons in summary */
.eg-user-modal__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.eg-user-modal__actions .ui.button{
  border-radius:999px !important;
  padding:.45rem .9rem !important;
  font-size:.8rem !important;
}

/* Section titles inside modal */
.eg-user-modal__section-title{
  font-size:.9rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--ink-muted);
  margin-bottom:.35rem;
}
.eg-user-modal__section-sub{
  font-size:.8rem;
  color:var(--muted);
  margin-bottom:.75rem;
}

/* Inverted segments reused as panels */
.eg-user-modal__panel.ui.segment{
  background:var(--panel-raise) !important;
  border-radius:1rem !important;
  border:1px solid var(--line-soft) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.4) !important;
}

/* Footer buttons */
.eg-user-modal__footer{
  margin-top:1.25rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:.75rem;
}

/* Mobile adjustments */
@media (max-width: 767.98px){
  .eg-user-grid{
    grid-template-columns:1fr;
  }
  .eg-user-modal__summary{
    flex-direction:column;
    align-items:flex-start;
  }
  .eg-user-modal__actions{
    width:100%;
    justify-content:flex-start;
  }
}






/* Header shell */
#userEditModal .header.eg-user-modal__header{
  background:var(--panel-elev) !important;
  border-bottom:1px solid var(--line-soft) !important;
  padding:1rem 1.25rem !important;
}

/* Top row: avatar + name + delete */
.eg-user-modal__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap; /* lets it stack nicely on mobile */
}

/* Avatar + name block */
.eg-user-modal__identity{
  display:flex;
  align-items:center;
  gap:.85rem;
}

.eg-user-modal__summary-avatar{
  width:48px;
  height:48px;
  border-radius:999px;
  background:linear-gradient(135deg,#f4d37a,#cda657);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:#111;
  font-size:1rem;
}

.eg-user-modal__summary-text{
  display:flex;
  flex-direction:column;
}

.eg-user-modal__summary-name{
  font-size:1.15rem;
  font-weight:600;
}

.eg-user-modal__summary-sub{
  font-size:.8rem;
  color:var(--ink-muted);
  margin-top:.15rem;
}

/* Delete button styling */
#userEditModal .js-user-delete{
  border-radius:999px !important;
  padding:.6rem 1.4rem !important;
}

/* Second row: action pills */
.eg-user-modal__summary{
  margin-top:.75rem;
  padding-top:.75rem;
}

.eg-user-modal__actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}

.eg-user-modal__actions .ui.button{
  border-radius:999px !important;
  padding:.45rem .85rem !important;
  font-size:.82rem !important;
}

/* Mobile behavior */
@media (max-width:767.98px){
  .eg-user-modal__top{
    flex-direction:column;
    align-items:flex-start;
  }

  .eg-user-modal__actions .ui.button{
    justify-content:flex-start;
  }
}

input [type="password"] {
  background: black;
  border-color: var(--line-soft);
  color: white;
}

.eg-account-modal__header{
  margin-bottom: 1em;
}
/* Account Page - Improve Readability */
#accountPage .ui.card .content,
#accountPage .ui.card .extra.content {
    color: #e0e0e0 !important;
}

#accountPage .ui.card .content strong,
#accountPage .ui.card .content .header {
    color: #f0f0f0 !important;
}

#accountPage .ui.card .content .description {
    color: #bbbbbb !important;
}

/* Labels inside Contact Info */
#accountPage .ui.divided.list .item strong {
    color: #c9a86a !important;   /* Gold accent for labels */
}

/* Make sure icons are visible */
#accountPage .ui.divided.list i.icon {
    color: #c9a86a !important;
}
/* =============================================
   Consent Nag - Force it above fixed nav
   ============================================= */
.ui.nag.consent-nag {
    z-index: 10000 !important;     /* Very high to sit above fixed nav */
    position: fixed !important;
    top: 50px !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

.ui.nag.consent-nag .title {
    font-weight: 600;
}

/* Optional: Make it look more premium */
.ui.nag.consent-nag {
    background: #1b1c1d !important;
    color: #f4f4f4 !important;
}

























.eg-lb-content {
  text-align: center !important;
}

.eg-lb-rank {
  margin-bottom: 1rem;
}

.eg-lb-medal {
  font-size: 1.75rem;
  line-height: 1;
}

.eg-lb-rank-label {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}

.eg-lb-crown {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

/* Photo */
.eg-lb-photo-wrap {
  display: flex;
  justify-content: center;
  margin: 0 auto 1rem;
}

.eg-lb-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(201, 168, 106, 0.55);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  display: block;
}

/* Initials fallback — black circle, forced center */
.eg-lb-initials-segment {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 auto 1rem !important;
  padding: 0 !important;
}

.eg-lb-initials {
  width: 96px;
  height: 96px;
  margin: 0 auto;
  border-radius: 50%;
  background: #000;
  color: #c9a86a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  border: 3px solid rgba(201, 168, 106, 0.55);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.eg-lb-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #f0f0f0;
  margin-bottom: 0.25rem;
}

.eg-lb-name a {
  color: #e8d5a8 !important;
  text-decoration: none;
}

.eg-lb-name a:hover {
  color: #c9a86a !important;
}

.eg-lb-divider {
  margin: 1rem 0 !important;
}

.eg-lb-stats {
  margin: 0 !important;
  justify-content: center !important;
}

.eg-lb-stats .statistic .value {
  color: #c9a86a !important;
  font-size: 1.35rem !important;
}

.eg-lb-stats .statistic .label {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 0.7rem !important;
}

.eg-lb-bar {
  margin-top: 1rem;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.eg-lb-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8a7040, #c9a86a);
  transition: width 0.6s ease;
}

/* Podium */
.eg-lb-card--gold {
  border-color: rgba(201, 168, 106, 0.55) !important;
}
.eg-lb-card--gold .eg-lb-rank-label { color: #c9a86a; }

.eg-lb-card--silver {
  border-color: rgba(192, 192, 192, 0.4) !important;
}
.eg-lb-card--silver .eg-lb-rank-label { color: #c0c0c0; }

.eg-lb-card--bronze {
  border-color: rgba(205, 127, 50, 0.45) !important;
}
.eg-lb-card--bronze .eg-lb-rank-label { color: #cd7f32; }