.backwards td { background-color: #ddddff !important; }
.gamepass td { background-color: #ddffdd !important; }
.backwardsandgamepass td { background-color: #faffdd !important; }
.json-details{ background:#f8f9fa; padding:10px; border-radius:4px; overflow:auto;}
.future-release td {
    background-color: #f8d7da !important;   /* a soft, dull red */
}
.future-release td:hover {
    background-color: #e6c9b0 !important;   /* a darker hue on hover */
}

/* give the brand a bit less padding so its height matches nav items */
.navbar-brand {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

/* remove default margin from h5 inside the navbar */
#current-view { margin-bottom: 0; }

/* keep the add button on the same baseline as the brand & view */
#addOwnedBtn { margin-left: .75rem; }

/* Add this inside <style> or a separate CSS file */
#loadingOverlay {
  position: fixed;      /* stay in place even when scrolling   */
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  display: flex;            /* centre the spinner horizontally/vertically */
  align-items: center;
  justify-content: center;
  background-color: rgba(255,255,255,.8);   /* optional semi‑transparent overlay */
  z-index: 2000;          /* above everything else (navbar, table…) */
}

/* style.css – add this near the bottom (or wherever you keep custom rules) */
.platform-logo {
    width: 36px;          /* force the pixel size */
    height: 36px;
    object-fit: contain;  /* keeps the aspect ratio but still hits the box */
    vertical-align: middle;
    margin-right: .5rem;   /* space between icon and game name */
}

/* optional – makes the checkmark a touch smaller and green */
.owned-checkmark {
  margin-left: 4px;     /* space between icon & game name */
  color: #28a745;       /* bootstrap‑success colour (or leave as default) */
  font-size: .9em;      /* slightly smaller than the rest of the text */
}

#pageInput {
    width: 4.5rem;          /* widen a touch */
    padding: .25rem .5rem;
    margin-left: .3rem;
}