/* ===== Agenda layout like Google ===== */

/* Day header */
.calendar, .calendar-widget {
  --day-col-w: 6.5rem;
}
.calendar .day-header, .calendar-widget .day-header {
  margin-top: .75rem;
  padding: .4rem 0 .25rem;
  border-top: 1px solid var(--color-surface-300);
  color: var(--color-text-secondary);
  font-weight: 700;
  letter-spacing: .2px;
}

/* Event rows: time column + content */
.calendar .event, .calendar-widget .event {
  display: grid;
  grid-template-columns: var(--day-col-w) 1fr;
  align-items: start;
  gap: .35rem 1rem;
  padding: .375rem 0;
  border-bottom: 1px solid var(--color-surface-200);
}

/* Time column */
.calendar .event-time, .calendar-widget .event-time {
  color: var(--color-text-secondary);
  font-weight: 700;
  white-space: nowrap;
}

/* Title + location */
.calendar .event-summary, .calendar-widget .event-summary { font-weight: 700; }
.calendar .event-location, .calendar-widget .event-location {
  grid-column: 2 / 3;
  margin-top: -2px;
  color: var(--color-text-secondary);
}

/* Source dot */
.calendar .event-dot, .calendar-widget .event-dot {
  height: 10px; width: 10px; border-radius: 50%; margin-right: 8px;
}

/* ===== Force "All day" label ===== */
/* Most builds add a class or data flag for all-day; cover both cases */
.calendar .event.all-day .event-time,
.calendar-widget .event.all-day .event-time,
.calendar .event[data-all-day="true"] .event-time,
.calendar-widget .event[data-all-day="true"] .event-time {
  position: relative; color: var(--color-text-secondary);
}
.calendar .event.all-day .event-time::after,
.calendar-widget .event.all-day .event-time::after,
.calendar .event[data-all-day="true"] .event-time::after,
.calendar-widget .event[data-all-day="true"] .event-time::after {
  content: "All day";
}
/* If your build shows 00:00 for all-day, hide the literal text */
.calendar .event.all-day .event-time > *,
.calendar-widget .event.all-day .event-time > * { visibility: hidden; }

/* ===== Make the first row in each day group a real header ===== */
.calendar-widget .flex.flex-col > div > .flex.flex-row:first-child {
  margin-top: .75rem;
  padding-top: .5rem;
  border-top: 1px solid var(--color-surface-300);
  background: transparent;
}
.calendar-widget .flex.flex-col > div > .flex.flex-row:first-child .ml-2.w-12 > span {
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}

/* ===== Show "All day" when the time cell is empty ===== */
/* Your DOM: <span class="ml-2 w-12"><span></span></span> */
.calendar-widget .ml-2.w-12 > span:empty::after {
  content: "All day";
  color: var(--color-text-secondary);
  font-weight: 700;
  position: relative;  /* inline replacement */
}

/* Optional: keep agenda rows tight & readable */
.calendar-widget .flex.flex-row {
  border-bottom: 1px solid var(--color-surface-200);
  padding: 6px 0;
}
.calendar-widget .ml-2.h-5.text-left.relative.truncate { width: 100% !important; }