/* Event card container */
/* ==================== */
.eventcard {
  margin-bottom: 1.5rem;
}


/* Continuation bar */
/* ================ */
.continuation-bar {
  display: flex;

  align-items: center;

  margin-bottom: 1.5rem;

  border: 1px solid var(--bs-secondary-border-subtle);
  border-radius: 0.5rem;

  overflow: hidden;

  background-color: var(--bs-tertiary-bg);
}

.continuation-bar__row:hover {
  background-color: var(--bs-light-bg-subtle);
}

.continuation-bar__accent {
  width: 0.35rem;

  align-self: stretch;

  flex-shrink: 0;
}

.continuation-bar__main {
  flex-grow: 1;

  display: flex;
  flex-direction: row;
  column-gap: 0.25rem;
  align-items: center;

  min-width: 0;

  padding: 0.5rem 0.5rem;

  @media (width <=576px) {
    flex-direction: column;
    row-gap: 0.25rem;
  }
}

.continuation-bar__title {
  font-size: 0.825rem;
  font-weight: 600;
  line-height: 1;

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

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.continuation-bar__link {
  text-decoration: none;
}

.continuation-bar__meta {
  line-height: 1;
  font-size: 0.75rem;

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

.continuation-bar__weather {
  padding: 0.25rem 0.5rem;
}

.continuation-bar__link-button {
  flex-shrink: 0;

  padding: 0.5rem 0.75rem;

  border-left: 1px solid var(--bs-secondary-border-subtle);

  font-size: 0.7rem;
  font-weight: 500;
}


/* Event card header */
/* ================= */
.eventcard__header {
  display: flex;

  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: start;

  padding: 0.5rem;

  &.eventcard__header--selected {
    background: var(--bs-warning) !important;
  }
}

/* Event dropdown menu */
.eventcard__dropdown {
  /* Fixed-width control gutter so titles align down the list. */
  flex: 0 0 2rem;

  order: 0;

  /* Pin the menu button to the top so its icon lines up with the title's
     first text line (rather than centring against the whole header).
     The button is a fixed 2.25rem circle, so we offset it by half the
     difference between its height and the title's line box to sit the icon
     centre on the title centre. Bootstrap uses RFS on the h3, so the title
     shrinks on small screens — the offset is retuned per breakpoint to keep
     the icon aligned. */
  align-self: flex-start;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  /* Desktop: h3 ~1.75rem (28px), line box ~33px vs 36px button. Offset tuned
     against measured layout (icon within ~1px of the title centre). */
  margin-top: -0.02rem;
  margin-right: 0.25rem;

  @media (width <=768px) {
    flex: 0 0 auto;
    margin-right: 0;

    /* Mobile: RFS shrinks the h3 (~23px, line box ~27px), so the button's
       fixed 36px height would otherwise sit too high. Nudge it down to keep
       the icon centred on the title (tuned against measured layout). */
    margin-top: -0.141rem;
  }
}

/* Tint the background of the event menu button when the event card header is highlighted (when selected to add to packing list) */
div.card-header.bg-warning div.eventcard__dropdown button.eventcard__dropdown-button {
  background-color: var(--bs-warning-bg-subtle);
}

.eventcard__dropdown-menu {
  min-width: min(13rem, calc(100vw - 2rem));
  max-width: calc(100vw - 1rem);
}

/* Three-dots toggle: tint the generic icon highlight with the body text colour
   (it sits on a card header, not the navbar). */
.eventcard__dropdown-button {
  --pg-dd-icon-accent: var(--bs-body-color);
}

.eventcard__dropdown-item {
  padding: 0.2rem 0.75rem;
}

/* Align the "Mark as complete/incomplete" label with the switch label above it.
   The switch (.form-switch) label sits 2.5em past its item's padding for the
   toggle track; the complete item's padding is 0.25rem narrower, so give the
   check icon a fixed box that pushes the text to the same x-position. */
.eventcard__dropdown-complete-icon {
  display: inline-block;
  /* Icon box + the trailing space after it must equal the switch's 2.5em
     toggle-track offset, minus the 0.25rem the complete item is padded wider.
     Subtract ~0.25em more for the inter-word space so the text lines up. */
  width: calc(2.5em - 0.25rem - 0.25em);
}

.eventcard__dropdown-swatch-group {
  padding: 0.25rem 1rem;

  text-align: center;
}

.eventcard__dropdown-swatch-link {
  display: inline;

  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Colour swatches on event dropdown menu */
.eventcard__dropdown-swatch {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 1px solid #ccc;
  display: inline-block;
}

/* Event details */
.eventcard__details {
  flex-grow: 1;

  display: flex;
  flex-direction: row;
  align-items: start;

  order: 1;
}


.eventcard__details-primary {
  flex-grow: 1;

  min-width: 0;

  margin-inline-end: 1rem;
  margin-bottom: 0;

  @media (width <=768px) {
    margin-inline-end: 0.5rem;
  }
}

.eventcard__title h3 {
  margin: 0;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

/* Meta line - time + location combined into one muted subtitle under the title */
.eventcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.125rem;

  margin-bottom: 0.5rem;

  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.2;

  color: var(--bs-body-color);
}

.eventcard__meta-item {
  display: inline-flex;
  align-items: center;

  white-space: nowrap;

  i {
    margin-inline-end: 0.25rem;
    font-size: 0.9em;
    opacity: 0.85;
  }
}

/* Middot separator between meta items (only between, not before the first) */
.eventcard__meta-item+.eventcard__meta-item::before {
  content: "·";

  margin-inline-end: 0.5rem;

  opacity: 0.7;
}

.event-badge__group {
  margin-bottom: 0.5rem;

  align-items: center;

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

  @media (width <=768px) {
    margin-bottom: 0.25rem;
  }
}

.event-badge {
  font-size: 0.65rem;

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

  font-weight: 600;

  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  @media (width <=768px) {
    font-size: 0.6rem;
    font-weight: 500 !important;
  }
}

.event-badge--duplicated {
  /* bg-warning-subtle border border-warning text-body-emphasis fw-semibold */
  border: 1px solid var(--bs-warning);
  background-color: var(--bs-warning-bg-subtle);
}

/* event-badge--archived badge bg-info-subtle border border-info text-body-emphasis fw-semibold */
.event-badge--archived {
  border: 1px solid var(--bs-info);
  background-color: var(--bs-info-bg-subtle);
}

/* event-badge--hidden-from-pup badge bg-danger-subtle border border-danger text-body-emphasis fw-semibold */
.event-badge--hidden-from-pup {
  border: 1px solid var(--bs-danger);
  background-color: var(--bs-danger-bg-subtle);
}


/* Dedicated weather zone. Location now lives in the meta line, so this column
   holds only the forecast and no longer competes for the right edge. */
.eventcard__details-secondary {
  flex-shrink: 0;

  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: center;
}

.eventcard__weather {
  flex-shrink: 0;
}


/* Event card body */
/* =============== */

.eventcard__body {
  /* p-2 p-md-3 */
  padding: 1rem;

  @media (width <=768px) {
    padding: 0.5rem;
  }
}

.eventcard__hidden-from-pup {
  padding: 1rem;

  i {
    margin-inline-end: 0.5rem;
  }
}

.eventcard__items-list-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 0.5rem;

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

  margin-bottom: 0.5rem;

  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;

  & .pg-switch {
    padding: 0;
  }
}

.eventcard__items-list-show-toggle {
  margin-bottom: 0;

  font-size: 0.925rem;

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

.eventcard__items-list-select {
  /* order-1 text-secondary ms-auto text-secondary" style="font-size: 0.925rem; */
  order: 1;

  margin-inline-start: auto;

  font-size: 0.925rem;

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


.eventcard__notes {
  /* smaller text-dark-emphasis rounded-1 border border-primary-subtle bg-primary-subtle p-2 mb-2 */
  margin-bottom: 0.5rem;
  padding: 0.5rem;

  border-radius: 0.25rem;

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

  color: var(--bs-dark-text-emphasis);
  background-color: var(--bs-primary-bg-subtle);
}

.eventcard__notes-header {
  /* fw-semibold border-bottom border-primary-subtle mb-1" style="font-size: 0.825rem; border-width: 2px; */
  margin-bottom: 0.25rem;

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

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

.eventcard__notes-text {
  font-size: 0.825rem;
}


.eventcard__items-list-empty-message {
  /* eventcard__items-list-empty-message p-3 m-0 */
  margin: 0;
  padding: 1rem;
}

.eventcard__items-list-hidden-message {
  /* eventcard__items-list-hidden-message text-secondary p-3 text-center */
  padding: 1rem;

  text-align: center;

  color: var(--bs-secondary);

  i {
    margin-inline-end: 0.5rem;
  }
}

/* "Show items" button shown alongside the hidden-items message. Builds on the
   reusable .pg-button base (see application/button.css) and adds the primary
   colour theme plus block-centred layout. */
.eventcard__items-list-show-button {
  display: block;
  margin: 0.25rem auto 0;

  border-color: var(--bs-primary-border-subtle);

  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);

  font-weight: 500;

  &:hover {
    border-color: var(--bs-primary);
  }

  &:focus-visible {
    border-color: var(--bs-primary);
  }
}

.events-item-list {}


/* Event card footer */
/* ================= */

/* eventcard__footer card-footer p-2 */
.eventcard__footer {
  padding: 0.5rem;
}