/* Date header - separates events into different days */
/* ================================================== */

/* --- Base (Classic) --- */
.event-date-header {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.event-date-header__icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;

  width: 2.5em;
  height: 3em;

  border-radius: 0.6em;
  border: 1px solid var(--bs-border-color);

  overflow: hidden;
}

.event-date-header__icon-day {
  flex-grow: 1;

  display: flex;
  justify-content: center;
  align-items: center;

  padding-top: 0.1em;

  font-weight: 600;
  text-align: center;
  font-size: 1.2em;
}

.event-date-header__icon-month {
  flex-shrink: 1;

  padding: 0.05em;

  font-weight: 600;
  font-size: 0.7em;
  text-align: center;

  color: var(--pg-accent-contrast, #fff);
  background-color: var(--pg-accent, #f5a623);
}

.event-date-header__title {
  flex-grow: 1;

  display: flex;
  align-items: center;

  margin-inline-start: 1rem;

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


/* Completed events - summary and list */
/* =================================== */
.completed-events__container {
  margin-bottom: 1rem;
}

/* Completed events shown as a labelled, set-apart group: a "Completed" heading
   above a compact wrapping strip of chips, indented with a left accent rule and a
   faint inset panel so it reads as the finished part of the day. */
.completed-events {
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;

  border-inline-start: 3px solid var(--bs-border-color);
  border-radius: 0.375rem;

  background-color: color-mix(in oklab, var(--bs-secondary-color) 6%, var(--bs-body-bg, #fff));
}

.completed-events__label {
  display: flex;
  align-items: center;
  gap: 0.35rem;

  margin-bottom: 0.4rem;

  color: var(--bs-secondary-color);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.completed-events__count {
  padding: 0.05rem 0.4rem;

  border-radius: 0.75rem;

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

  font-size: 0.7rem;
  line-height: 1.4;
}

.completed-events__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.completed-events__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  max-width: 100%;
  padding: 0.2rem 0.6rem;

  /* Tinted from the event's colour (or --bs-secondary-color when uncoloured),
     set via the --chip-colour custom property on the element. Mixes mirror the
     eventcard_cap_colour / eventcard_body_colour helpers. */
  --chip-colour: var(--bs-secondary-color);

  border: 1px solid color-mix(in oklab, var(--chip-colour) 45%, var(--bs-body-bg, #fff) 55%);
  border-radius: 1rem;
  background-color: color-mix(in oklab, var(--chip-colour) 50%, var(--bs-body-bg, #fff));

  color: var(--bs-secondary-color);
  font-size: 0.8rem;
  line-height: 1.2;
  text-decoration: none;

  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;

  /* Default state: filled check tinted to the chip colour. Hover swaps to an undo
     icon to signal that clicking will unmark the event (mirrors the complete-button
     hover pattern). */
  .completed-events__chip-icon--default {
    color: color-mix(in oklab, var(--chip-colour) 70%, var(--bs-body-color) 30%);
  }

  .completed-events__chip-icon--hover {
    display: none;
    color: var(--bs-secondary);
  }

  &:hover {
    border-color: color-mix(in oklab, var(--chip-colour) 65%, var(--bs-body-bg, #fff) 35%);
    background-color: color-mix(in oklab, var(--chip-colour) 32%, var(--bs-body-bg, #fff) 68%);
    color: var(--bs-body-color);

    .completed-events__chip-icon--default {
      display: none;
    }

    .completed-events__chip-icon--hover {
      display: inline;
    }

    .completed-events__chip-title {
      text-decoration: none;
    }
  }
}

.completed-events__chip-time {
  flex-shrink: 0;

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

.completed-events__chip-title {
  overflow: hidden;

  max-width: 18ch;

  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-pg-style="compact"] .completed-events__chip {
  border-radius: 2px;
}

[data-pg-style="compact"] .completed-events {
  border-radius: 2px;
}