/* ============================================================
   JustinGambles — Topbar, Command Palette, Notifications,
   Breadcrumbs
============================================================ */

/* ===== TOPBAR ===== */
/* Full-width bar, flush with the very top of the page — sits above
   .page/.container entirely (see layouts/app.php) so it isn't inset by
   the container's side padding or pushed down by any top padding. */
.jg-topbar{
  position: sticky;
  top: 0;
  z-index: 500;
  width: 100%;
  margin: 0;
  padding: 16px 20px;
  background:
    linear-gradient(180deg, rgba(7,9,12,.92), rgba(7,9,12,.82));
  border-bottom: 1px solid rgba(196,135,71,.14);
  backdrop-filter: blur(10px);
}

.jg-topbar__inner{
  width: min(1400px, calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.jg-topbar__search{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  color: rgba(170,180,197,.85);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.jg-topbar__search:hover{
  border-color: rgba(196,135,71,.28);
  background: rgba(255,255,255,.03);
}
.jg-topbar__searchIcon{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: .8;
}
.jg-topbar__searchText{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.jg-topbar__kbd{
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(233,238,247,.7);
}

.jg-topbar__right{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.jg-topbar__rewards{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(196,135,71,.28);
  background: rgba(196,135,71,.08);
  color: var(--gold2);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.jg-topbar__rewards:hover{
  background: rgba(196,135,71,.14);
}
.jg-topbar__rewards svg{ width: 18px; height: 18px; flex-shrink: 0; }

.jg-topbar__authBtn{ padding: 10px 14px !important; font-size: 12px !important; }

/* ===== NOTIFICATIONS ===== */
.jg-notif{
  position: relative;
  z-index: 200120;
}
.jg-notif__toggle{ display: none; }

.jg-notif__btn{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  color: rgba(233,238,247,.85);
  cursor: pointer;
}
.jg-notif__btn:hover{
  border-color: rgba(196,135,71,.28);
  background: rgba(255,255,255,.03);
}
.jg-notif__btn svg{ width: 19px; height: 19px; }

.jg-notif__badge{
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e0483e;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(10,13,20,.9);
}

.jg-notif__menu{
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: 320px;
  max-width: 88vw;
  padding: 14px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    linear-gradient(180deg, rgba(13,18,26,.97), rgba(10,15,22,.95));
  border: 1px solid rgba(196,135,71,.28);
  box-shadow: 0 26px 60px rgba(0,0,0,.6);
  display: none;
}
.jg-notif__toggle:checked + .jg-notif__btn + .jg-notif__menu{ display: block; }

.jg-notif__head{
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-size: 11px;
  color: rgba(233,238,247,.75);
  padding: 0 2px 10px;
}

.jg-notif__empty{
  padding: 14px 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(170,180,197,.85);
  text-align: center;
}

.jg-notif__list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}

.jg-notif__item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}

.jg-notif__itemIco{
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  font-size: 15px;
  background: rgba(196,135,71,.14);
  color: var(--gold2);
}

.jg-notif__itemBody{ min-width: 0; }
.jg-notif__itemLabel{
  font-weight: 800;
  font-size: 12.5px;
  color: rgba(233,238,247,.92);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jg-notif__itemMeta{
  font-size: 11.5px;
  color: rgba(170,180,197,.8);
  margin-top: 2px;
}

.jg-notif__foot{
  display: block;
  text-align: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 12px;
  font-weight: 800;
  color: rgba(196,135,71,.9);
  text-decoration: none;
}
.jg-notif__foot:hover{ color: var(--gold2); }

/* ===== USER BUBBLE (level/name additions on top of existing .jg-user) ===== */
.jg-user__nameWrap{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}
.jg-user__level{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: none;
  color: rgba(170,180,197,.8);
}
.jg-menuLink--btn{
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

/* ===== COMMAND PALETTE ===== */
.jg-cmdk{
  position: fixed;
  inset: 0;
  z-index: 200500;
  display: none;
}
.jg-cmdk.is-open{ display: block; }

.jg-cmdk__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(4,5,8,.72);
  backdrop-filter: blur(3px);
}

.jg-cmdk__panel{
  position: relative;
  width: min(560px, 92vw);
  margin: 10vh auto 0;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    linear-gradient(180deg, rgba(13,18,26,.98), rgba(10,15,22,.97));
  border: 1px solid rgba(196,135,71,.32);
  box-shadow: 0 40px 100px rgba(0,0,0,.7);
  overflow: hidden;
}

.jg-cmdk__inputWrap{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.jg-cmdk__inputWrap svg{ width: 18px; height: 18px; opacity: .7; flex-shrink: 0; }

.jg-cmdk__input{
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: rgba(233,238,247,.95);
  font-size: 15px;
  font-family: inherit;
}
.jg-cmdk__input::placeholder{ color: rgba(170,180,197,.6); }

.jg-cmdk__esc{
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(233,238,247,.6);
}

.jg-cmdk__results{
  max-height: 50vh;
  overflow-y: auto;
  padding: 8px;
}

.jg-cmdk__row{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: rgba(233,238,247,.92);
}
.jg-cmdk__row.is-active,
.jg-cmdk__row:hover{
  background: rgba(196,135,71,.12);
}
.jg-cmdk__rowLabel{ font-weight: 850; font-size: 13.5px; }
.jg-cmdk__rowSub{ font-size: 11.5px; color: rgba(170,180,197,.8); }

.jg-cmdk__none{
  padding: 20px 12px;
  text-align: center;
  font-size: 13px;
  color: rgba(170,180,197,.8);
}

/* ===== BREADCRUMBS ===== */
/* Segmented-pill trail — same visual language as the leaderboard tabs
   (a soft glass pill housing the whole trail, current page highlighted
   as a tinted gold pill inside it) instead of plain "Home / Page" text. */
.jg-breadcrumbs{ margin: 0 2px 18px; }
.jg-breadcrumbs__list{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 4px;
  list-style: none;
  width: fit-content;
  max-width: 100%;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(196,135,71,.16);
  border-radius: 16px;
  box-sizing: border-box;
}
.jg-breadcrumbs__item{ display: flex; align-items: center; min-width: 0; }
.jg-breadcrumbs__item a,
.jg-breadcrumbs__item span{
  display: inline-flex;
  align-items: center;
  max-width: min(100%, 320px);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid transparent;
}
.jg-breadcrumbs__item a{
  color: rgba(170,180,197,.70);
  text-decoration: none;
  transition: color .15s, background .15s;
}
.jg-breadcrumbs__item a:hover{
  color: rgba(233,238,247,.92);
  background: rgba(255,255,255,.05);
}
.jg-breadcrumbs__item span{
  color: var(--gold2);
  background: rgba(196,135,71,.14);
  border-color: rgba(243,208,138,.30);
}
.jg-breadcrumbs__sep{
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 18px; height: 18px;
  color: rgba(170,180,197,.35);
}
.jg-breadcrumbs__sep svg{ width: 11px; height: 11px; }

@media (max-width: 480px){
  .jg-breadcrumbs__item a,
  .jg-breadcrumbs__item span{ padding: 6px 10px; font-size: 11px; max-width: 34vw; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px){
  .jg-topbar{
    /* Was position:static. A static element paints at the same flat
       layer as ordinary page content, no matter what z-index its
       children (the dropdown menus) declare internally — so any
       positioned page content with its own z-index (the hero image,
       stats card, etc. all set one) rendered on top of it. Making the
       bar a real positioned element lets its z-index count again, so
       it and its dropdowns sit above page content like they're
       meant to. It still simply scrolls away with the page exactly
       as before — this doesn't make it sticky/fixed. */
    position: relative;
    z-index: 500;
    padding: 10px 10px 10px 60px; /* left space clears the fixed hamburger */
  }
  .jg-topbar__inner{ width: 100%; gap: 8px; }
  .jg-topbar__searchText{ display: none; }
  .jg-topbar__kbd{ display: none; }
  .jg-topbar__search{ flex: 0 0 auto; padding: 10px; }
  .jg-topbar__rewards span{ display: none; }
  .jg-topbar__rewards{ padding: 10px; }
  /* Push the icon group to the right edge of the bar. The search box
     no longer grows to fill the row on mobile (it's icon-only here),
     so without this the notification/user icons ended up bunched up
     right next to the hamburger button instead of sitting on the
     right side of the bar. */
  .jg-topbar__right{ margin-left: auto; }
  .jg-user__nameWrap{ display: none; }
  .jg-user__chev{ display: none; }
  .jg-user__btn{ padding: 6px; }
  /* The icon group is now genuinely pinned to the right edge, so its
     menus no longer need the extra rightward nudge that used to
     compensate for the old off-left position — that nudge is what
     was pushing them past the edge of the screen. Cap the user
     menu's width the same way the notification menu already is, so
     neither can overflow a narrow phone screen. */
  .jg-user__menu{ max-width: 88vw; }
  .jg-cmdk__panel{ margin-top: 6vh; }
}