@import url("/assets/tokens.css");

.calendar-preview-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s-md);
  min-height: 44px;
  padding: var(--s-sm) var(--s-md);
  border: 1px dashed var(--c-primary-ink);
  border-radius: var(--r-md);
  background: var(--c-sunken);
  color: var(--c-ink-body);
  font: var(--t-caption);
}
.calendar-preview-banner strong { color: var(--c-ink); font: var(--t-button); letter-spacing: var(--ls-button); text-transform: uppercase; }
.calendar-preview-banner span { flex: 1; }
.calendar-preview-banner button,
.calendar-preview-actions button,
.calendar-preview-review {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--c-hairline-strong);
  border-radius: var(--r-sm);
  background: var(--c-canvas);
  color: var(--c-primary-ink);
  cursor: pointer;
  font: var(--t-button);
}
.calendar-preview-banner button:hover,
.calendar-preview-actions button:hover,
.calendar-preview-review:hover { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-on-primary); }
.calendar-preview-banner button:disabled,
.calendar-preview-actions button:disabled { cursor: wait; color: var(--c-ink-faint); }
.calendar-preview-expiry { color: var(--c-ink-muted); font-style: italic; }

.calendar-preview-proposal {
  border: 1px dashed var(--c-primary-ink) !important;
  border-left: 3px dashed var(--c-primary-ink) !important;
  border-radius: var(--r-sm) !important;
  background: var(--c-sunken) !important;
  color: var(--c-ink) !important;
}
.calendar-preview-proposal strong,
.calendar-preview-proposal time { color: var(--c-ink) !important; }
.calendar-preview-proposal .calendar-preview-copy { color: var(--c-ink-muted); font: var(--t-caption); }
.calendar-preview-actions { display: flex; flex-wrap: wrap; gap: var(--s-xs); margin-top: var(--s-xs); }
.calendar-preview-actions button { padding: var(--s-xs) var(--s-sm); }
.calendar-preview-actions .calendar-preview-confirm { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-on-primary); }
.calendar-preview-annotation { display: block; margin-top: var(--s-xxs); color: var(--c-ink-muted); font: var(--t-caption); }

.day-b-object.calendar-preview-proposal { cursor: default; overflow: visible; z-index: 9; }
.day-b-object.calendar-preview-proposal .calendar-preview-actions { position: absolute; inset-inline: var(--s-xs); inset-block-end: var(--s-xs); }
.day-b-object.calendar-preview-proposal .calendar-preview-actions button { flex: 1; }

.week-preview-popover {
  position: absolute;
  z-index: 12;
  inset-inline: 0;
  inset-block-start: 100%;
  padding: var(--s-sm);
  border: 1px solid var(--c-hairline-strong);
  border-radius: var(--r-md);
  background: var(--c-canvas);
  box-shadow: var(--e-lifted);
}

.month-calendar-cell.has-preview { border-style: dashed; border-color: var(--c-primary-ink); }
.month-preview-leaf { display: block; color: var(--c-primary-ink); font: var(--t-caption); line-height: 1; }
.month-preview-count { color: var(--c-primary-ink); font: var(--t-data); }

.agenda-preview-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-sm); align-items: center; padding: var(--s-sm); }
.agenda-preview-row .calendar-preview-actions { margin: 0; }

.calendar-preview-announcer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 759px) {
  .calendar-preview-banner { align-items: flex-start; flex-wrap: wrap; }
  .calendar-preview-banner span { flex-basis: calc(100% - var(--s-xxl)); }
  .agenda-preview-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-preview-proposal { transition: none !important; }
}