.card { border-radius: 1rem; }
.list-group-item { border-radius: .75rem; }
.navbar-brand { letter-spacing: .2px; }

/* Cover thumbnails (lazy-loaded when Covers toggle is ON) */
.cover-thumb{
  width: 84px;
  height: 84px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}
.cover-thumb .cover-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none; /* only visible when loaded */
}
html.show-covers .cover-thumb .cover-img[src]{
  display: block;
}
.cover-thumb .cover-placeholder{
  font-size: .75rem;
  color: var(--bs-secondary-color);
}

/* Contrast boost: improves readability for muted text on some themes */
html.contrast-boost[data-bs-theme="dark"] .text-secondary,
html.contrast-boost[data-bs-theme="dark"] .text-muted{
  color: rgba(255,255,255,.72) !important;
}
html.contrast-boost[data-bs-theme="light"] .text-secondary,
html.contrast-boost[data-bs-theme="light"] .text-muted{
  color: rgba(0,0,0,.65) !important;
}

/* Fix Superhero specifically (muted text is too dim) */
html[data-theme-name="superhero"] .text-secondary,
html[data-theme-name="superhero"] .text-muted{
  color: rgba(255,255,255,.68);
}

/* Ensure flex children can actually shrink for ellipsis to work */
.min-w-0 { min-width: 0 !important; }

/* Multiline tooltip (pure CSS) */
.vc-tooltip{
  position: relative;
}

/* Tooltip box */
.vc-tooltip:hover::after{
  content: attr(data-tooltip);
  position: absolute;

  /* default: open to the right */
  left: 0;
  top: 100%;
  margin-top: 8px;

  z-index: 9999;
  background: rgba(0,0,0,0.92);
  color: #fff;
  padding: 8px 10px;
  border-radius: 10px;

  /* multiline + sizing */
  white-space: pre-wrap;
  line-height: 1.35;

  /* keep it from overflowing viewport */
  max-width: min(520px, calc(100vw - 24px));
  width: max-content;

  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  pointer-events: none; /* prevent flicker when hovering tooltip itself */
}

/* Tooltip arrow */
.vc-tooltip:hover::before{
  content: "";
  position: absolute;

  left: 18px;
  top: 100%;
  margin-top: 2px;

  border: 6px solid transparent;
  border-bottom-color: rgba(0,0,0,0.92);

  z-index: 10000;
  pointer-events: none;
}

/* --- Prevent tooltip going off-screen on the right edge ---
   Cards are in .row with bootstrap columns; last column tends to overflow.
   Flip the tooltip to open to the LEFT for the last column in each row.
*/

/* lg: 3 columns -> last column is every 3rd */
@media (min-width: 992px){
  .row > .col-lg-4:nth-child(3n) .vc-tooltip:hover::after{
    left: auto;
    right: 0;
  }
  .row > .col-lg-4:nth-child(3n) .vc-tooltip:hover::before{
    left: auto;
    right: 18px;
  }
}

/* md: 2 columns -> last column is every 2nd */
@media (min-width: 768px) and (max-width: 991.98px){
  .row > .col-md-6:nth-child(2n) .vc-tooltip:hover::after{
    left: auto;
    right: 0;
  }
  .row > .col-md-6:nth-child(2n) .vc-tooltip:hover::before{
    left: auto;
    right: 18px;
  }
}

/* small: 1 column -> always open right (no flip needed) */

.vinylcat-bmc-fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2000;

  display: inline-flex;
  align-items: center;
  gap: .5rem;

  padding: .55rem .9rem;
  border-radius: 999px;

  /* Theme-aware colors (Bootswatch/Bootstrap) */
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);

  text-decoration: none;
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.15);
}

.vinylcat-bmc-fab:hover{
  color: var(--bs-body-color);
  border-color: var(--bs-primary);
  box-shadow: 0 .75rem 1.75rem rgba(0,0,0,.20);
  transform: translateY(-1px);
  text-decoration: none;
}

/* Optional: make it slightly “accented” without breaking themes */
.vinylcat-bmc-fab::before{
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: var(--bs-success);
  opacity: .9;
}