/* Events styles (scaffold) */

/* Event Planner: compact date/time controls */
.event-datetime-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; margin-top: 8px; }
.event-datetime-row input[type="date"],
.event-datetime-row input[type="time"] { min-width: 0; padding: 6px 8px; line-height: 1.2; height: 36px; }

/* Events list: allow JS to set a max-height and enable scrolling */
#eventsList { list-style: none; margin: 0; padding: 0; overflow-y: auto; overflow-x: hidden; max-height: 56px; min-height: 0; contain: layout paint; }
.event-item { box-sizing: border-box; }

/* Normalize Clear Past/Future button sizes */
button[onclick*="clearPastEvents"],
button[onclick*="clearFutureEvents"],
a[onclick*="clearPastEvents"],
a[onclick*="clearFutureEvents"] {
  height: 32px;
  line-height: 1.15;
  padding: 0 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  /* Keep labels on one line so buttons stay compact */
  white-space: nowrap;
  flex-wrap: nowrap;
  /* Gracefully truncate if space is extremely tight */
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  /* Fluid sizing: fill available space, shrink when narrow, don't overflow */
  width: var(--clear-btn-width, auto);
  max-width: 100%;
  min-width: var(--clear-btn-min-width, 0);
  flex: var(--clear-btn-flex, 1 1 0);
  text-align: center;
}
/* Prevent icons from shrinking and forcing label wraps */
button[onclick*="clearPastEvents"] i,
button[onclick*="clearFutureEvents"] i,
a[onclick*="clearPastEvents"] i,
a[onclick*="clearFutureEvents"] i { flex-shrink: 0; }
/* Remove any differing intrinsic min-widths */
button[onclick*="clearPastEvents"],
button[onclick*="clearFutureEvents"],
a[onclick*="clearPastEvents"],
a[onclick*="clearFutureEvents"] { min-width: 0; max-width: none; }

/* Per-button overrides available via CSS variables:
   --clear-btn-width: auto|<length>
   --clear-btn-min-width: <length> (default 0 so it can shrink)
   --clear-btn-flex: e.g., 1 1 0 (to participate in flex layout)
*/

/* Very narrow screens: allow full shrink without overflow */
@media (max-width: 400px) {
  button[onclick*="clearPastEvents"],
  button[onclick*="clearFutureEvents"],
  a[onclick*="clearPastEvents"],
  a[onclick*="clearFutureEvents"] { width: auto; min-width: 0; }
}

/* Wide screens: let them expand naturally within their container */
@media (min-width: 900px) {
  button[onclick*="clearPastEvents"],
  button[onclick*="clearFutureEvents"],
  a[onclick*="clearPastEvents"],
  a[onclick*="clearFutureEvents"] { min-width: 0; }
}

/* If a container directly contains both clear buttons, make it a flex row with gap so buttons can grow/shrink together */
:where(div, section):has(> button[onclick*="clearPastEvents"]):has(> button[onclick*="clearFutureEvents"]),
:where(div, section):has(> a[onclick*="clearPastEvents"]):has(> a[onclick*="clearFutureEvents"]) {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
/* Optional explicit wrapper (use on the parent): <div class="events-actions"> */
.events-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.events-actions > button,
.events-actions > a { flex: 1 1 0; min-width: 0; max-width: 100%; }
@media (max-width: 480px) {
  :where(div, section):has(> button[onclick*="clearPastEvents"]):has(> button[onclick*="clearFutureEvents"]) > button,
  :where(div, section):has(> a[onclick*="clearPastEvents"]):has(> a[onclick*="clearFutureEvents"]) > a {
    flex: 1 1 100%;
  }
}

/* Tablet adjustments */
@media (max-width: 1024px) {
  .event-datetime-row { gap: 6px; }
  .event-datetime-row input[type="date"],
  .event-datetime-row input[type="time"] { height: 34px; padding: 6px 8px; }
}

/* Phone adjustments */
@media (max-width: 768px) {
  .event-datetime-row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .event-datetime-row input[type="date"],
  .event-datetime-row input[type="time"] { height: 34px; padding: 6px 8px; }
}
@media (max-width: 480px) {
  .event-datetime-row { grid-template-columns: 1fr !important; gap: 6px; }
  .event-datetime-row input[type="date"],
  .event-datetime-row input[type="time"] { width: 100%; }
}