/*
 * Event Calendar widget.
 *
 * A month laid out with grid rather than a table, so a narrow screen can drop
 * the seven columns without the markup having to change.
 */
.ekl-calendar {
    --ekl-calendar-today: #2dd4bf;
    --ekl-popup-ribbon: #2dd4bf;

    @apply relative w-full;
}

/* Alerts & Notices */
.ekl-calendar-alert {
    @apply my-[12px] w-full rounded-[4px] border border-solid border-slate-200 bg-white px-[18px] py-[14px] text-[14px] leading-[1.5] text-slate-700 shadow-xs;

    border-left: 4px solid #dba617;

    p {
        @apply m-0 p-0;
    }
}

/* Search bar */
.ekl-calendar__search {
    @apply mb-[16px] flex items-center;
}

.ekl-calendar__search-wrap {
    @apply relative flex w-full max-w-[320px] items-center rounded-[8px] border border-solid border-slate-200 bg-white px-[12px] h-[38px] transition-all duration-200 shadow-xs;

    &:focus-within {
        @apply border-[#5527d7] ring-2 ring-[#5527d7]/15;
    }

    i {
        @apply mr-[8px] flex shrink-0 items-center justify-center text-[14px] text-slate-400 pointer-events-none;
    }
}

.ekl-calendar__search-icon {
    @apply mr-[8px] flex shrink-0 items-center justify-center text-[15px] text-slate-400 pointer-events-none;

    svg {
        @apply block text-slate-400;
        stroke: currentColor;
    }
}

.ekl-calendar .ekl-calendar__search-input,
.ekl-calendar input.ekl-calendar__search-input {
    @apply flex-1 min-w-0 border-none bg-transparent p-0 m-0 text-[13px] text-slate-700 outline-none shadow-none;
    height: 100% !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: normal !important;

    &::placeholder {
        @apply text-slate-400;
        opacity: 1;
    }
}

.ekl-calendar__search-clear {
    @apply ml-[6px] flex h-[18px] w-[18px] shrink-0 cursor-pointer items-center justify-center rounded-full border-none bg-slate-200 p-0 text-[12px] leading-none text-slate-500 transition-colors hover:bg-slate-300 hover:text-slate-800;
}

.ekl-calendar__head {
    @apply mb-[20px] flex items-center justify-between gap-[16px] flex-wrap;
}

.ekl-calendar__nav {
    @apply inline-flex items-center gap-[6px];
}

.ekl-calendar__btn {
    @apply inline-flex h-[36px] cursor-pointer items-center justify-center rounded-[6px] border border-solid border-slate-200 bg-white px-[14px] text-[13px] font-medium text-slate-600 transition-all duration-200 select-none;

    svg {
        stroke: currentColor;
    }
}

.ekl-calendar__btn:hover,
.ekl-calendar__btn:active,
.ekl-calendar__btn:focus,
.ekl-calendar__btn:focus-visible,
.ekl-calendar__btn.is-active {
    @apply border-[#5527d7] bg-[#5527d7] text-white shadow-xs outline-none;

    svg {
        stroke: currentColor;
    }
}

.ekl-calendar__btn--prev,
.ekl-calendar__btn--next {
    @apply w-[36px] px-0;
}

.ekl-calendar__btn--today {
    @apply font-medium;
}

.ekl-calendar__month {
    @apply m-0 text-center text-[26px] font-normal leading-[1.2] text-slate-800;

    font-family: Georgia, Cambria, 'Times New Roman', Times, serif;
}

.ekl-calendar__views {
    @apply inline-flex items-center gap-[6px];
}

.ekl-calendar__view-btn {
    @apply inline-flex h-[36px] cursor-pointer items-center gap-[6px] rounded-[6px] border border-solid border-slate-200 bg-slate-50 px-[14px] text-[13px] font-medium text-slate-600 transition-all duration-200 select-none;

    svg {
        @apply shrink-0;
        stroke: currentColor;
    }
}

.ekl-calendar__view-btn:hover,
.ekl-calendar__view-btn:active,
.ekl-calendar__view-btn:focus,
.ekl-calendar__view-btn:focus-visible,
.ekl-calendar__view-btn.is-active {
    @apply border-[#5527d7] bg-[#5527d7] text-white shadow-xs outline-none;

    svg {
        stroke: currentColor;
    }
}

.ekl-calendar__grid {
    @apply w-full border border-solid border-slate-200 rounded-[6px] overflow-hidden bg-white shadow-xs;
}

.ekl-calendar__row {
    @apply grid;

    grid-template-columns: repeat(7, minmax(0, 1fr));

    &:not(:last-child) {
        @apply border-b border-solid border-slate-200;
    }
}

.ekl-calendar__row--head {
    @apply bg-slate-100/80 border-b border-solid border-slate-200;
}

.ekl-calendar__weekday {
    @apply px-[8px] py-[10px] text-center text-[14px] font-bold leading-normal text-slate-800;

    font-family: Georgia, Cambria, 'Times New Roman', Times, serif;

    &:not(:last-child) {
        @apply border-r border-solid border-slate-200;
    }
}

.ekl-calendar__day {
    @apply relative flex min-h-[115px] flex-col gap-[6px] p-[8px] transition-colors bg-white;

    &:not(:last-child) {
        @apply border-r border-solid border-slate-200;
    }

    &.is-empty {
        @apply bg-white;
    }

    &.is-other-month .ekl-calendar__number {
        @apply text-slate-300 font-normal;
    }

    &.is-today {
        @apply bg-amber-50/50;
    }

    &:hover:not(.is-empty) {
        @apply bg-slate-50/30;
    }
}

.ekl-calendar__number {
    @apply text-center text-[13px] font-normal leading-none text-slate-700 pt-[2px] block;
}

/* Today is marked by its number or subtle highlight */
.ekl-calendar__day.is-today .ekl-calendar__number {
    @apply font-semibold text-amber-800;
}

.ekl-calendar__day-events {
    @apply flex flex-col gap-[4px] w-full;
}

.ekl-calendar__event {
    --ekl-event-colour: #2dd4bf;

    @apply cursor-pointer rounded-[4px] px-[6px] py-[4px] text-[12px] leading-[1.3] text-slate-700 transition-all duration-200 select-none;

    border-left: 3px solid var(--ekl-event-colour);
    background-color: color-mix(in srgb, var(--ekl-event-colour) 12%, transparent);

    &:hover {
        background-color: color-mix(in srgb, var(--ekl-event-colour) 24%, transparent);
        transform: translateY(-1px);
        @apply shadow-sm;
    }

    &.is-hidden {
        @apply hidden;
    }
}

.ekl-calendar__event-title {
    @apply block font-medium truncate;

    a {
        @apply text-inherit no-underline hover:underline;
    }
}

.ekl-calendar__event-meta {
    @apply mt-[2px] block text-[11px] text-slate-500 truncate;
}

/* Popover for extra events (+ N more) */
.ekl-calendar__more {
    @apply cursor-pointer rounded-full bg-slate-100 px-[8px] py-[2px] text-center text-[11px] font-semibold text-slate-600 transition-colors hover:bg-slate-200 select-none inline-block self-start;
}

.ekl-calendar__popover {
    @apply absolute top-[30px] left-[8px] right-[8px] z-[30] rounded-[8px] border border-solid border-slate-200 bg-white p-[10px] shadow-xl;

    max-height: 220px;
    overflow-y: auto;
}

.ekl-calendar__popover-head {
    @apply mb-[8px] flex items-center justify-between border-b border-solid border-slate-100 pb-[6px];
}

.ekl-calendar__popover-title {
    @apply text-[12px] font-bold text-slate-800;
}

.ekl-calendar__popover-close {
    @apply cursor-pointer border-none bg-transparent text-[16px] leading-none text-slate-400 hover:text-slate-700;
}

.ekl-calendar__popover-events {
    @apply flex flex-col gap-[4px];
}

/* Modal details popup */
.ekl-calendar-modal {
    @apply fixed inset-0 z-[99999] flex items-center justify-center p-[16px];
}

.ekl-calendar-modal__overlay {
    @apply fixed inset-0 bg-black/50 backdrop-blur-xs transition-opacity;
}

.ekl-calendar-modal__dialog {
    @apply relative z-[10] w-full max-w-[480px] overflow-hidden rounded-[14px] bg-white shadow-2xl transition-all;

    animation: ekl-modal-in 0.25s ease-out;
}

@keyframes ekl-modal-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.ekl-calendar-modal__ribbon {
    @apply h-[6px] w-full;

    background-color: var(--ekl-popup-ribbon, #2dd4bf);
}

.ekl-calendar-modal__close {
    @apply absolute top-[14px] right-[14px] flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-full border-none bg-slate-100 text-[18px] text-slate-500 transition-colors hover:bg-slate-200 hover:text-slate-800;
}

.ekl-calendar-modal__image {
    @apply w-full max-h-[220px] overflow-hidden bg-slate-100;

    img {
        @apply w-full h-full max-h-[220px] object-cover block;
    }
}

.ekl-calendar-modal__body {
    @apply p-[24px];
}

.ekl-calendar-modal__title {
    @apply pr-[32px] text-[20px] font-bold leading-[1.3] text-slate-800 mb-[10px];
}

.ekl-calendar-modal__desc {
    @apply mb-[16px] text-[14px] leading-relaxed text-slate-600;
}

.ekl-calendar-modal__meta {
    @apply mb-[20px] flex flex-col gap-[8px];
}

.ekl-calendar-modal__meta-item {
    @apply flex items-center gap-[8px] text-[13px] text-slate-600;

    i {
        @apply text-[15px] text-slate-400;
    }
}

.ekl-calendar-modal__link {
    @apply inline-flex items-center justify-center rounded-[6px] bg-[#5527d7] px-[20px] py-[10px] text-[13px] font-semibold text-white no-underline transition-all;

    &:hover,
    &:focus {
        background-color: #431eb3;
        color: #ffffff !important;
        text-decoration: none;
    }
}

/* Timegrid for Day and Week views */
.ekl-calendar__timegrid {
    @apply w-full border border-solid border-slate-200 rounded-[6px] overflow-hidden bg-white shadow-xs;
}

.ekl-calendar__timegrid-row {
    @apply grid;

    &:not(:last-child) {
        @apply border-b border-solid border-slate-200;
    }
}

.ekl-calendar__week-view .ekl-calendar__timegrid-row {
    grid-template-columns: 75px repeat(7, minmax(0, 1fr));
}

.ekl-calendar__day-view .ekl-calendar__timegrid-row {
    grid-template-columns: 75px 1fr;
}

.ekl-calendar__timegrid-row--head {
    @apply bg-slate-100/80 border-b border-solid border-slate-200;
}

.ekl-calendar__time-cell {
    @apply px-[10px] py-[8px] text-right text-[12px] font-normal text-slate-500 border-r border-solid border-slate-200 bg-white select-none leading-none flex items-start justify-end;
}

.ekl-calendar__time-cell--head {
    @apply bg-slate-100/80;
}

.ekl-calendar__time-label {
    @apply inline-block pt-[2px];
}

.ekl-calendar__timegrid-col-head {
    @apply px-[4px] py-[10px] text-center text-[13px] font-bold text-slate-800 border-r border-solid border-slate-200 last:border-r-0;

    font-family: Georgia, Cambria, 'Times New Roman', Times, serif;

    &.is-today {
        @apply bg-amber-50/70 text-amber-900;
    }
}

.ekl-calendar__timegrid-row--allday {
    @apply border-b-2 border-solid border-slate-200;

    .ekl-calendar__time-cell {
        @apply py-[12px] border-b-2 border-solid border-slate-200;
    }
}

.ekl-calendar__timegrid-cell {
    @apply relative min-h-[46px] p-[4px] border-r border-solid border-slate-200 last:border-r-0 bg-white transition-colors flex flex-col gap-[3px];

    &::after {
        content: '';
        @apply pointer-events-none absolute left-0 right-0 top-1/2 border-b border-dashed border-slate-100/80;
    }

    &.is-today {
        @apply bg-amber-50/40;
    }

    &:hover {
        @apply bg-slate-50/40;
    }
}

.ekl-calendar__timegrid-cell--allday {
    @apply min-h-[42px] border-b-2 border-solid border-slate-200;

    &::after {
        display: none;
    }
}

/* As a list, each event is a line of its own rather than a cell in a week. */
.ekl-calendar--list {
    @apply flex flex-col gap-[12px];

    .ekl-calendar__list-items {
        @apply flex flex-col gap-[10px];
    }

    .ekl-calendar__event {
        @apply px-[14px] py-[12px] text-[14px];
    }
}

/*
 * Seven columns need width. Below that the month becomes a list of the days
 * that have something on them, which is all a narrow screen can usefully show.
 */
@media (max-width: 767px) {
    .ekl-calendar--month {
        .ekl-calendar__row--head {
            @apply hidden;
        }

        .ekl-calendar__row {
            @apply block;

            &:not(:last-child) {
                @apply border-b-0;
            }
        }

        .ekl-calendar__day {
            @apply min-h-0 flex-col gap-[6px] border-b border-solid border-slate-200;

            &:not(:last-child) {
                @apply border-r-0;
            }

            &.is-empty,
            &:not(.has-events) {
                @apply hidden;
            }
        }
    }
}