/* Item grid container */
/* =================== */
/* item-grid-items-container d-flex flex-wrap row-gap-3 justify-content-around column-gap-1 justify-content-md-start column-gap-md-4 mt-2 */
.item-grid {
  display: flex;

  flex-wrap: wrap;
  justify-content: start;

  row-gap: 1rem;
  column-gap: 1.5rem;

  margin-top: 0.5rem;

  @media(width <=768px) {
    justify-content: space-around;
    column-gap: 0.25rem;
  }
}


/* Single item container */
/* ===================== */
/* item-grid-item-container d-flex flex-column justify-content-start rounded-2 overflow-hidden m-0  */
.item-grid-single-item-container {
  display: flex;

  flex-direction: column;
  justify-content: start;

  width: 175px;

  overflow: hidden;

  border-radius: 0.5rem;

  margin: 0;

  /* Narrower column width on smaller screens */
  @media(width <=768px) {
    width: 125px;
  }

  /* Archived items have a more translucent background */
  &.archived-item {
    background: rgba(0, 0, 0, 0.1);
  }

  /* Items which are NOT archived have a darker background */
  &.unarchived-item {
    background: rgba(0, 0, 0, 0.2);
  }
}


/* Item header */
/* =========== */
/* border-bottom border-secondary text-center align-middle" style="background-color: rgb(var(--bs-secondary-bg-rgb));" */
.item-grid-item-header {
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: rgb(var(--bs-secondary-bg-rgb));

  border-bottom: 1px solid var(--bs-secondary-color);

  text-align: center;

  align-items: center;

  /* Archived items have header text in the secondary text colour */
  .archived-item & {
    color: rgb(var(--bs-secondary-rgb));
  }
}

.item-grid-item-select-checkbox {
  display: inline-block;

  margin-inline-end: 0.25rem;
}

.item-grid-item-reference {
  display: inline-block;

  margin-inline-end: 0.3rem;

  font-size: 0.875em;
  font-weight: 700;
}

.item-grid-item-notes-icon {
  display: inline-block;

  margin-inline-end: 0.25rem;

  font-size: 0.875rem;
}

.item-grid-item-duplicated-warning-icon {
  display: inline-block;

  margin-inline-end: 0.25rem;

  font-size: 0.875rem;
  line-height: 1;
}

/* d-inline-block rounded rounded-1 bg-success text-center text-white fw-bold align-middle */
/* style="min-width: 1rem; min-height: 1rem; margin-right: 0.1rem; font-size: 0.7rem;"  */
.item-grid-item-event-legend-key {
  display: inline-block;

  min-width: 1rem;
  min-height: 1rem;

  margin-right: 0.2rem;

  border-radius: 0.25rem;

  text-align: center;
  align-items: center;

  font-size: 0.7rem;
  font-weight: 700;

  background-color: var(--bs-success);
  color: white;

}


/* Item thumbnail */
/* ============== */
/* d-flex align-items-start justify-content-center flex-grow-1  */
.item-grid-item-thumbnail-container {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 175px;
  height: 175px;

  @media(width <=768px) {
    width: 125px;
    height: 125px;
  }

  /* Archived items have a more translucent background */
  .archived-item & {
    opacity: 0.25;
  }
}

.item-grid-item-thumbnail {
  max-width: 150px;
  max-height: 150px;
  /* margin-top: 12.5px;
  margin-bottom: 12.5px; */

  @media(width <=768px) {
    max-width: 105px;
    max-height: 105px;
    /* margin-top: 10px;
    margin-bottom: 10px; */
  }
}



/* Item footer */
/* =========== */
.item-grid-item-footer {
  flex-grow: 1;

  display: flex;
  flex-direction: column;
  justify-content: start;
}

/* d-flex flex-column row-gap-0 smaller text-body-secondary mx-1 mb-2 p-1 */
.item-grid-usage-dates-container {
  flex: 0 0 none;

  display: flex;
  flex-direction: column;
  justify-content: start;
  row-gap: 0;

  margin-inline-start: 0.25rem;
  margin-inline-end: 0.25rem;
  margin-bottom: 0.5rem;

  padding: 0.25rem;

  font-size: 0.8rem;

  color: rgb(var(--bs-secondary-rgb));
}

/* d-flex align-items-center */
.item-grid-usage-dates-last-container,
.item-grid-usage-dates-next-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* flex-shrink-1 me-2
flex-shrink-1 me-2 */
.item-grid-usage-dates-last-title,
.item-grid-usage-dates-next-title {
  flex-shrink: 1;
  margin-inline-end: 0.5rem;

  font-size: 1rem;

  font-weight: 700;
}

/* flex-grow-1 d-flex flex-column justify-content-center align-items-start */
/* flex-grow-1 d-flex flex-column align-items-start justify-content-center */
.item-grid-usage-dates-last-dates,
.item-grid-usage-dates-next-dates {
  flex-grow: 1;
}

.item-grid-item-footer-item-meta {
  flex-grow: 1;

  display: flex;
  flex-direction: column;
}

.item-grid-item-footer-item-meta-notes,
.item-grid-item-footer-item-meta-duplicate-events {
  flex: 1;

  display: flex;
  flex-direction: column;
}

.item-grid-item-footer-item-meta-duplicate-events {}

/* smaller text-dark-emphasis m-1 mt-2 p-1 rounded-1 border border-dark-subtle bg-body-secondary */
.item-grid-notes-container {
  flex-grow: 1;

  display: flex;
  flex-direction: column;
  justify-content: start;

  margin: 0.25rem;
  margin-top: 0.5rem;
  padding: 0.25rem;

  border-radius: 0.25rem;
  border: 1px solid var(--bs-dark-border-subtle);

  background-color: rgb(var(--bs-secondary-bg-rgb));
  color: var(--bs-dark-text-emphasis);

  font-size: 0.8rem;
}

/* fw-semibold border-bottom border-dark-subtle mb-1" style="font-size: 0.75rem; border-width: 2px; */
.item-grid-notes-header {
  margin-bottom: 0.25rem;

  border-bottom: 1px solid var(--bs-dark-border-subtle);

  font-size: 0.75rem;
  font-weight: 600;
}

/* border-top border-secondary text-center align-middle px-1 pb-1 small */
/* style="background-color: rgb(var(--bs-secondary-bg-rgb));" */
.item-grid-item-footer-item-actions {
  padding-inline: 0.25rem;
  padding-bottom: 0.25rem;

  border-top: 1px solid rgb(var(--bs-secondary-rgb));

  background-color: rgb(var(--bs-secondary-bg-rgb));

  text-align: center;
  vertical-align: middle;

  font-size: 0.875rem;
}

/* item-grid-duplicated-item-event-links-container */
/* duplicated-items-info-bar-toggle-target  */
.item-grid-duplicated-item-event-links-container {}

/* item-grid-duplicated-item-event-links m-1 mt-2 rounded-1 border border-warning bg-warning-subtle p-1 */
.item-grid-duplicated-item-event-links {
  flex: auto;
  margin: 0.25rem;
  margin-top: 0.5rem;
  padding: 0.25rem;

  border-radius: 0.25rem;
  border: 1px solid rgb(var(--bs-warning-rgb));

  background-color: var(--bs-warning-bg-subtle);
}

/* border-bottom border-warning fw-semibold text-body-secondary mb-1 style="font-size: 0.75rem;" */
.item-grid-duplicated-item-event-links-header {
  margin-bottom: 0.25rem;

  border-bottom: 1px solid rgb(var(--bs-warning-rgb));

  color: var(--bs-secondary-color);

  font-size: 0.75rem;
  font-weight: 600;
}

/* d-inline-block text-decoration-none text-body-secondary style="font-size: 0.75rem;" */
.item-grid-duplicated-item-event-links-list-entry {
  display: inline-block;

  color: var(--bs-secondary-color);
  text-decoration: none;

  font-size: 0.75rem;
}