/* FotoKlocek theme for the native weekly calendar. */
.calendar-view {
  padding: 24px;
  background: var(--panel);
  overflow-x: auto;
}
#calendar-native {
  min-width: 740px;
}
#calendar-native.fc {
  --fc-page-bg-color: #0f1b2a;
  --fc-neutral-bg-color: #142235;
  --fc-neutral-text-color: #c3ccda;
  --fc-border-color: #2b394b;
  --fc-today-bg-color: rgba(255, 208, 41, 0.065);
  --fc-highlight-color: rgba(255, 208, 41, 0.12);
  --fc-button-text-color: #ecf0f6;
  --fc-button-bg-color: #18283b;
  --fc-button-border-color: #35445a;
  --fc-button-hover-bg-color: #25364a;
  --fc-button-hover-border-color: #66748a;
  --fc-button-active-bg-color: #ffd029;
  --fc-button-active-border-color: #ffd029;
  --fc-event-bg-color: #ffd029;
  --fc-event-border-color: #f0ba13;
  --fc-event-text-color: #09121e;
  --fc-now-indicator-color: #ffd029;
  --fc-list-event-hover-bg-color: #1c2d42;
  color: var(--text);
  font-size: 0.875rem;
}
#calendar-native .fc-toolbar {
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
#calendar-native .fc-toolbar-title {
  font: 800 1.35rem/1.4 var(--font);
  letter-spacing: -0.04em;
}
#calendar-native .fc-button {
  font: 700 0.875rem/1.4 var(--font);
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 6px;
  box-shadow: none;
}
#calendar-native .fc-button-primary:not(:disabled).fc-button-active {
  color: var(--bg);
}
#calendar-native .fc-button:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  box-shadow: none;
}
#calendar-native .fc-button:disabled {
  opacity: 0.55;
}
#calendar-native .fc-col-header-cell {
  padding-block: 13px;
  background: #142235;
  font-weight: 700;
}
#calendar-native .fc-col-header-cell.fc-day-today {
  background: #2b2c20;
  color: var(--yellow);
}
#calendar-native .fc-timegrid-slot {
  height: 36px;
  border-bottom-color: #253346;
}
#calendar-native .fc-timegrid-slot-minor {
  border-top-style: dotted;
  border-top-color: #223045;
}
#calendar-native .fc-timegrid-axis-cushion,
#calendar-native .fc-timegrid-slot-label-cushion {
  color: #abb7c9;
  font-size: 0.75rem;
  padding: 0 12px;
}
#calendar-native .fc-timegrid-divider {
  background: #26374b;
  border: 0;
  padding: 2px;
}
#calendar-native .fc-timegrid-event {
  border-radius: 5px;
  padding: 4px 6px;
  box-shadow: none;
  cursor: pointer;
}
#calendar-native .fc-event-time {
  font-size: 0.75rem;
  font-weight: 800;
}
#calendar-native .fc-event-title {
  font-size: 0.875rem;
  font-weight: 700;
}
#calendar-native .fc-event:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
#calendar-native .fc-daygrid-event {
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
}
#calendar-native .fc-list {
  border-color: var(--border);
}
#calendar-native .fc-list-empty {
  background: var(--panel);
  color: var(--muted);
}
#calendar-native .fc-list-day-cushion {
  background: #18283b;
  padding: 15px;
  color: var(--yellow);
}
#calendar-native .fc-list-event td {
  padding: 16px 12px;
  cursor: pointer;
}
#calendar-native .fc-list-event-dot {
  border-color: var(--yellow);
}
#calendar-native .fc-list-event-title {
  font-weight: 700;
}
#calendar-native .fc-list-event-time {
  white-space: normal;
}
.calendar-feedback {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border-top: 1px solid var(--border);
}
.calendar-feedback p {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}
.calendar-feedback p[data-state="error"] {
  color: #ffd029;
}
.calendar-feedback button {
  flex: none;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  background: transparent;
  color: var(--yellow);
  border: 1px solid #625627;
  border-radius: 6px;
  padding: 10px 14px;
  min-height: 44px;
  font: 700 0.875rem var(--font);
  cursor: pointer;
}
.calendar-feedback button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.calendar-feedback button:focus-visible,
.event-close:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}
.event-dialog {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 48px);
  color: var(--text);
  background: var(--panel);
  padding: 36px;
  border: 1px solid #465064;
  border-radius: 14px;
  box-shadow: 0 20px 80px #0008;
}
.event-dialog::backdrop {
  background: #030910bf;
  backdrop-filter: blur(4px);
}
.event-dialog h2 {
  font-size: 1.8rem;
  padding-right: 15px;
  overflow-wrap: anywhere;
}
.event-dialog .eyebrow {
  color: var(--yellow);
  margin: 14px 0 18px;
  font-size: 0.75rem;
}
.event-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 7px;
  background: #1d2a3a;
  color: white;
  font: 400 1.8rem/1 var(--font);
  cursor: pointer;
}
.event-time {
  margin-top: 23px;
  font-size: 1rem;
  color: #e0e6ee;
}
.event-timezone {
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 5px;
}
.event-location {
  padding: 15px 0;
  margin-top: 12px;
  border-bottom: 1px solid var(--border);
  color: #cbd4e2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.event-description {
  margin-top: 20px;
  color: var(--muted);
  line-height: 1.85;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.event-description a {
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.event-dialog > .button {
  margin-top: 24px;
}
@media (max-width: 640px) {
  .calendar-view {
    padding: 18px 14px;
  }
  #calendar-native {
    min-width: 0;
  }
  #calendar-native .fc-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  #calendar-native .fc-toolbar-chunk:nth-child(2) {
    order: -1;
  }
  #calendar-native .fc-toolbar-title {
    font-size: 1.2rem;
  }
  #calendar-native .fc-button {
    padding-inline: 12px;
  }
  #calendar-native .fc-view-harness {
    overflow-x: auto;
  }
  #calendar-native .fc-timegrid {
    min-width: 700px;
  }
  #calendar-native .fc-list-day-text,
  #calendar-native .fc-list-day-side-text {
    float: none;
    display: block;
  }
  #calendar-native .fc-list-event-time {
    min-width: 75px;
  }
  .calendar-feedback {
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
  }
  .calendar-feedback button {
    justify-content: center;
  }
  .event-dialog {
    padding: 28px 22px;
  }
  .event-dialog h2 {
    font-size: 1.6rem;
  }
}