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

/* The last card of a day carries no gap of its own - the day group's own
   1rem padding-bottom (see event-date-header.css) already separates it from
   whatever comes after, and stacking both left a double gap between days. */
.events-day > .eventcard:last-child {
  margin-bottom: 0;
}


/* 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;
}

/* In-place title rename - reading state: heading + pencil button */
.eventcard__title-display {
  display: flex;
  align-items: baseline;
  column-gap: 0.375rem;
}

.eventcard__title-edit-button {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  padding: 0;
  background-color: transparent;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
}

.eventcard__title-edit-button:hover,
.eventcard__title-edit-button:focus-visible {
  border-color: var(--bs-emphasis-color);
  color: var(--bs-emphasis-color);
}

/* In-place title rename - editing state: input + Save / Cancel */
.eventcard__title-form {
  margin-bottom: 0.25rem;
}

.eventcard__title-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.375rem;
}

.eventcard__title-input {
  flex: 1 1 16rem;
  min-width: 0;
  max-width: 32rem;
  font-weight: 700;
}

.eventcard__title-form-actions {
  flex: 0 0 auto;

  display: flex;
  column-gap: 0.375rem;
}

.eventcard__title-form-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: calc(1.3125rem + 0.5rem + (var(--bs-border-width) * 2));
  height: calc(1.3125rem + 0.5rem + (var(--bs-border-width) * 2));
  padding: 0;

  background: none;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);

  color: var(--bs-secondary-color);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.eventcard__title-form-action--save:hover,
.eventcard__title-form-action--save:focus-visible {
  border-color: var(--bs-success);
  color: var(--bs-success);
}

.eventcard__title-form-action--cancel:hover,
.eventcard__title-form-action--cancel:focus-visible {
  border-color: var(--bs-danger);
  color: var(--bs-danger);
}

.eventcard__title-error {
  margin: 0.375rem 0 0;
  font-size: 0.85rem;
  color: var(--bs-danger-text-emphasis);
}

/* 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).
   Skipped before the "when" edit controls - the pencil follows its date range with
   a plain gap rather than a dot, and the "Edit date" chip leads the line. */
.eventcard__meta-item+.eventcard__meta-item:not(.eventcard__meta-edit-button):not(.eventcard__meta-edit-chip)::before {
  content: "·";

  margin-inline-end: 0.5rem;

  opacity: 0.7;
}

/* In-place "when" edit - reading state. The edit affordance leads the meta line:
   a small pencil button just after the date range on a multi-day event, or an
   "Edit date" chip standing in for the (absent) date on a single-day one. */
.eventcard__meta-display {
  margin-bottom: 0.5rem;
}

.eventcard__meta-display .eventcard__meta {
  margin-bottom: 0;
}

.eventcard__meta-edit-button {
  flex: 0 0 auto;

  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;

  background-color: transparent;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);

  color: var(--bs-secondary-color);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
}

/* Stands in for the date on a single-day event, so it wears the date's calendar
   icon and reads as a control - an outlined chip in the meta line's own size. */
.eventcard__meta-edit-chip {
  flex: 0 0 auto;

  padding: 0.0625rem 0.4375rem;

  background-color: transparent;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);

  color: var(--bs-secondary-color);
  font-size: 0.8rem;
  line-height: 1.3;
  cursor: pointer;
}

.eventcard__meta-edit-button:hover,
.eventcard__meta-edit-button:focus-visible,
.eventcard__meta-edit-chip:hover,
.eventcard__meta-edit-chip:focus-visible {
  border-color: var(--bs-emphasis-color);
  color: var(--bs-emphasis-color);
}

/* In-place "when" edit - editing state: the date / end date / time fields, laid
   out like the calendar dialog's "when" row. */
.eventcard__meta-form {
  margin-bottom: 0.5rem;
}

/* Save / Cancel ahead of the whole "when" question, on the same row as the fields
   rather than stacked above or below them. Wraps rather than crushes on a narrow
   card. */
.eventcard__meta-form-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 0.625rem;
  row-gap: 0.5rem;
}

/* The whole "when" question on one line: the date, and beside it whichever optional
   part has been added - or, when neither has, the offers to add one. Wraps rather
   than crushes on a narrow card. */
.eventcard__meta-form-row {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 0.625rem;
  row-gap: 0.5rem;
}

.eventcard__meta-field {
  flex: 1 1 9rem;
  min-width: 0;

  display: flex;
  flex-direction: column;
  row-gap: 0.3125rem;
}

/* `hidden` said explicitly: these are flex containers, so a display of their own
   would otherwise win over the browser's default rule for the attribute. */
.eventcard__meta-field[hidden],
.eventcard__meta-adders[hidden] {
  display: none;
}

.eventcard__meta-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;

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

.eventcard__meta-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 0.5rem;
}

/* Taking a part of the event back off - the Remove beside a time or an end date.
   An outlined chip in sentence case so it reads as a button rather than as a
   second label, turning red on hover to say what pressing it does. */
.eventcard__meta-clear {
  padding: 0.0625rem 0.4375rem;

  background: none;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);

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

  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

.eventcard__meta-clear:hover,
.eventcard__meta-clear:focus-visible {
  border-color: var(--bs-danger);
  color: var(--bs-danger);
}

/* The offers to add a time or an end date - quiet and dashed, so they read as
   places where something could be added rather than as controls of their own. */
.eventcard__meta-adders {
  flex: 0 0 auto;

  display: flex;
  flex-direction: row;
  column-gap: 0.5rem;
}

.eventcard__meta-adder {
  display: inline-flex;
  align-items: center;
  column-gap: 0.375rem;

  min-height: calc(1.3125rem + 0.5rem + (var(--bs-border-width) * 2));
  padding: 0 0.625rem;

  background: none;
  border: var(--bs-border-width) dashed var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);

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

  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.eventcard__meta-adder:hover {
  border-style: solid;
  border-color: var(--bs-emphasis-color);
  color: var(--bs-emphasis-color);
}

/* Save / Cancel, as a plain pair of icon buttons rather than the labelled pair the
   calendar dialog and title-rename use elsewhere - this corner of the card is
   small and quiet, and words here would outweigh the fields they decide the fate
   of. Sized and aligned to match the fields' own height so the row reads level. */
.eventcard__meta-form-actions {
  flex: 0 0 auto;

  display: flex;
  column-gap: 0.375rem;
}

.eventcard__meta-form-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: calc(1.3125rem + 0.5rem + (var(--bs-border-width) * 2));
  height: calc(1.3125rem + 0.5rem + (var(--bs-border-width) * 2));
  padding: 0;

  background: none;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);

  color: var(--bs-secondary-color);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.eventcard__meta-form-action--save:hover,
.eventcard__meta-form-action--save:focus-visible {
  border-color: var(--bs-success);
  color: var(--bs-success);
}

.eventcard__meta-form-action--cancel:hover,
.eventcard__meta-form-action--cancel:focus-visible {
  border-color: var(--bs-danger);
  color: var(--bs-danger);
}

/* Remove sits apart from Save/Cancel with a wider gap - it's a destructive
   action on the event itself (unlike Cancel, which only discards edits), so a
   stray click landing next to Cancel shouldn't be able to reach it. */
.eventcard__meta-form-action--remove {
  margin-inline-start: 0.375rem;
}

.eventcard__meta-form-action--remove:hover,
.eventcard__meta-form-action--remove:focus-visible {
  border-color: var(--bs-danger);
  color: var(--bs-danger);
}

/* Disabled rather than absent when there's no location to remove - see the
   view's comment on why. Dimmed and inert rather than merely inert: the
   button's own base rule sets cursor: pointer, which would otherwise beat the
   browser's default not-allowed on a disabled button. */
.eventcard__meta-form-action--remove:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.eventcard__meta-error {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--bs-danger-text-emphasis);
}

/* Location line - its own line under the meta line, same visual language (the
   .eventcard__meta / .eventcard__meta-item / .eventcard__meta-edit-* classes
   above are shared with it) but its own toggle, since the picker inside is its
   own moving part. */
.eventcard__location-block {
  margin-bottom: 0.5rem;
}

.eventcard__location-display .eventcard__meta {
  margin-bottom: 0;
}

.eventcard__location-form {
  margin-bottom: 0;
}

/* Save / Cancel / Remove ahead of the field, on the same row as it rather than
   stacked above or below - matching the meta line's own form. Wraps rather
   than crushes on a narrow card. */
.eventcard__location-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.625rem;
  row-gap: 0.5rem;
}

.eventcard__location-field {
  flex: 1 1 16rem;
  min-width: 0;
  max-width: 28rem;

  position: relative;
}

.eventcard__location-results {
  top: 100%;
}

.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 has its own line under 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 */
  /* Bottom is tighter than the other sides: whatever the body ends in (the
     hidden-items message, the empty message, or the item grid) supplies its
     own trailing space before the footer, and the full 1rem here on top of
     that doubled the gap the same way the header/hidden-message stack did. */
  padding: 1rem 1rem 0.5rem;

  @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.25rem;

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

  & .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 {
  margin-bottom: 0.5rem;
  padding: 0.5rem;

  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 */
  /* Tightened from the original 1rem all round: the header above already
     carries its own margin-bottom + padding-bottom, and the body's own
     padding-bottom below already sets the body off from the footer, so
     the full 1rem on both edges here doubled both gaps. */
  padding: 0.375rem 1rem;

  text-align: center;

  color: var(--bs-secondary);

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

/* "Show items" button shown alongside the hidden-items message. Colour comes
   from .pg-button--chrome (see application/pg_button.css); only the
   block-centred layout is particular to this spot. */
.eventcard__items-list-show-button {
  display: block;
  margin: 0.25rem auto 0;
}

.events-item-list {}


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

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