/**
 * Styles for the custom Calendar Of Events, the Upcoming Events widget and
 * the shared event modal.
 *
 * Kept as a plain stylesheet under public/ (like public/js/*.js) so the
 * feature renders correctly whether or not the Vite bundle has been rebuilt.
 */

/* ------------------------------------------------------------- Calendar */
.pmi-calendar {
    --pmi-event-color: #0b8043;
    background: #fff;
    padding: 8px 4px 16px;
    font-size: 14px;
}

.pmi-calendar .fc {
    --fc-border-color: #dadce0;
    --fc-today-bg-color: #fff;
    --fc-page-bg-color: #fff;
    font-family: inherit;
}

.pmi-calendar .fc .fc-toolbar {
    flex-wrap: wrap;
    gap: 12px;
}

.pmi-calendar .fc .fc-toolbar-title {
    font-size: 20px;
    font-weight: 500;
    color: #3c4043;
}

.pmi-calendar .fc .fc-button {
    background: #fff;
    border: 1px solid #dadce0;
    color: #3c4043;
    font-weight: 500;
    text-transform: capitalize;
    box-shadow: none;
    border-radius: 4px;
    padding: 6px 14px;
}

.pmi-calendar .fc .fc-button:hover {
    background: #f1f3f4;
    color: #202124;
}

.pmi-calendar .fc .fc-button-primary:not(:disabled).fc-button-active,
.pmi-calendar .fc .fc-button-primary:not(:disabled):active {
    background: #e8f0fe;
    border-color: #dadce0;
    color: #1967d2;
}

.pmi-calendar .fc .fc-button:focus {
    box-shadow: none;
}

.pmi-calendar .fc .fc-button-group > .fc-button {
    border-radius: 0;
}

.pmi-calendar .fc .fc-button-group > .fc-button:first-child {
    border-radius: 4px 0 0 4px;
}

.pmi-calendar .fc .fc-button-group > .fc-button:last-child {
    border-radius: 0 4px 4px 0;
}

/*
 * Dropdown pemilih tampilan, menggantikan grup tombol Month/Week/Scheduled.
 * Gayanya disamakan dengan tombol toolbar yang tampil sekarang.
 */
.pmi-view-picker {
    appearance: none;
    -webkit-appearance: none;
    background-color: #2c3e50;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 16px;
    border: 1px solid #2c3e50;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5;
    padding: 6px 30px 6px 12px;
}

.pmi-view-picker:hover {
    background-color: #1a252f;
    border-color: #1a252f;
}

.pmi-view-picker:focus {
    outline: 2px solid #86b7fe;
    outline-offset: 1px;
}

/* Daftar pilihan mengikuti gaya terang agar tetap terbaca. */
.pmi-view-picker option {
    background: #fff;
    color: #202124;
}

.pmi-calendar .fc .fc-col-header-cell-cushion {
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #70757a;
    text-decoration: none;
}

.pmi-calendar .fc .fc-daygrid-day-number {
    color: #3c4043;
    text-decoration: none;
    font-size: 12px;
    padding: 6px 8px;
}

.pmi-calendar .fc .fc-day-today .fc-daygrid-day-number {
    background: #1a73e8;
    color: #fff;
    border-radius: 50%;
    min-width: 24px;
    text-align: center;
    margin: 4px;
    padding: 4px;
}

/* Events */
/*
 * --pmi-event-color is set per event by public/js/event-calendar.js from the
 * ribbon colour the admin picked, and falls back to the calendar-wide green
 * declared on .pmi-calendar. --pmi-event-text-color exists because one swatch
 * in the palette (Kuning) needs dark type; every other colour takes white.
 */
.pmi-calendar .pmi-event,
.pmi-upcoming .pmi-event {
    background: var(--pmi-event-color);
    border-color: var(--pmi-event-color);
    color: var(--pmi-event-text-color, #fff);
    border-radius: 4px;
    padding: 1px 4px;
    cursor: pointer;
}

.pmi-calendar .pmi-event .fc-event-title,
.pmi-calendar .pmi-event .fc-event-time {
    color: var(--pmi-event-text-color, #fff);
}

/* Libur nasional: merah, dan bukan sesuatu yang dapat diklik. */
.pmi-calendar .pmi-holiday {
    cursor: default;
}

.pmi-calendar .pmi-holiday .pmi-event__title {
    font-weight: 600;
}

.pmi-calendar .fc-list-event.pmi-holiday .pmi-event__title {
    color: #a50e0e;
}

/* O-F05: history stays on the calendar but reads as history. */
.pmi-calendar .pmi-event--past {
    opacity: .45;
}

.pmi-calendar .pmi-event--highlighted {
    box-shadow: inset 0 0 0 2px #f9ab00;
}

.pmi-event__inner {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.pmi-event__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pmi-event__star {
    flex: 0 0 auto;
    color: #ffd54f;
}

/* Rentang tanggal event beberapa hari, hanya pada tampilan Scheduled. */
.pmi-event__range {
    flex: 0 0 auto;
    margin-left: 4px;
    color: #5f6368;
    font-size: 12px;
    white-space: nowrap;
}

.pmi-event__range::before {
    content: '·';
    margin-right: 6px;
}

.pmi-calendar .fc-list-event.pmi-event {
    background: transparent;
    color: inherit;
}

.pmi-calendar .fc-list-event.pmi-event .pmi-event__title {
    color: #3c4043;
    white-space: normal;
}

.pmi-calendar .fc-list-event.pmi-event .fc-list-event-dot {
    border-color: var(--pmi-event-color);
}

.pmi-calendar__note {
    margin: 12px 4px 0;
    font-size: 12px;
    color: #70757a;
}

@media (max-width: 767.98px) {
    .pmi-calendar {
        padding: 4px 0 12px;
    }

    .pmi-calendar .fc .fc-toolbar {
        justify-content: center;
    }

    .pmi-calendar .fc .fc-toolbar-title {
        font-size: 17px;
    }
}

/* ------------------------------------------------- Upcoming events widget */
.event-footer {
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: 12px;
    color: #70757a;
    background: #f1f3f4;
    border-radius: 0 0 8px 8px;
}

.pmi-upcoming {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pmi-upcoming__item {
    border-bottom: 1px solid #ececec;
}

.pmi-upcoming__item:last-child {
    border-bottom: 0;
}

.pmi-upcoming__button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 10px 12px;
    cursor: pointer;
}

.pmi-upcoming__button:hover {
    background: #f7f9fa;
}

.pmi-upcoming__date {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.pmi-upcoming__day {
    font-size: 16px;
    font-weight: 700;
    color: #3c4043;
}

.pmi-upcoming__month {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .6px;
    color: #8a6d3b;
}

.pmi-upcoming__title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.pmi-upcoming__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pmi-event-color, #0b8043);
    flex: 0 0 auto;
}

.pmi-upcoming__name {
    color: #202124;
    font-size: 14px;
}

.pmi-upcoming__time {
    display: block;
    margin: 2px 0 0 14px;
    font-size: 11px;
    color: #70757a;
}

.pmi-upcoming__empty,
.pmi-upcoming__note {
    margin: 0;
    padding: 12px;
    font-size: 13px;
    color: #70757a;
}

.pmi-upcoming__note {
    padding-bottom: 0;
}

.pmi-event-star {
    color: #f9ab00;
}

/*
 * Category chips (Gratis / Berbayar, Public / Member Only).
 *
 * Kept separate from .pmi-event-badge, which carries the countdown status, so
 * the two never fight over the same class. A chip is only rendered when the
 * admin actually chose a category -- an uncategorised event shows nothing,
 * exactly as before this feature existed.
 */
.pmi-event-tags {
    /* inline-flex so the chips can sit on the same line as the date and time
       inside the modal; in the Upcoming Events widget the element before them
       is a block-level flex box, so they still start on their own line. */
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    vertical-align: baseline;
}

/* Sebaris dengan tanggal & jam pada modal: beri jarak dari teks di kirinya. */
.pmi-event-modal__row .pmi-event-tags {
    margin-left: 10px;
}

.pmi-event-tags:empty {
    display: none;
}

.pmi-event-tag {
    display: inline-block;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.pmi-event-tag--free {
    background: #e6f4ea;
    color: #0b8043;
}

.pmi-event-tag--paid {
    background: #fef7e0;
    color: #b06000;
}

.pmi-event-tag--public {
    background: #e8f0fe;
    color: #1967d2;
}

.pmi-event-tag--member {
    background: #ede7f9;
    color: #4b2ca3;
}

.pmi-event-badge {
    display: inline-block;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    background: #e8f0fe;
    color: #1967d2;
}

.pmi-event-badge--ongoing {
    background: #fef7e0;
    color: #b06000;
}

.pmi-event-badge--past {
    background: #f1f3f4;
    color: #70757a;
}

/* ---------------------------------------------------------------- Modal */
body.pmi-event-modal-open {
    overflow: hidden;
}

.pmi-event-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.pmi-event-modal[hidden] {
    display: none;
}

.pmi-event-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(32, 33, 36, .6);
}

.pmi-event-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}

.pmi-event-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: #5f6368;
    cursor: pointer;
}

.pmi-event-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-right: 24px;
}

.pmi-event-modal__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #202124;
}

.pmi-event-modal__meta {
    margin-top: 12px;
    border-top: 1px solid #ececec;
    padding-top: 12px;
}

.pmi-event-modal__row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 14px;
    color: #3c4043;
}

.pmi-event-modal__icon {
    flex: 0 0 auto;
}

.pmi-event-modal__time {
    color: #70757a;
}

.pmi-event-modal__link {
    display: inline-block;
    margin-left: 6px;
    color: #1a73e8;
}

.pmi-event-modal__description {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.6;
    color: #3c4043;
    word-break: break-word;
}

.pmi-event-modal__description a {
    color: #1a73e8;
}

.pmi-event-modal__description ul,
.pmi-event-modal__description ol {
    padding-left: 22px;
}

/* -------------------------------------------------------------- Carousel */
.pmi-event-carousel {
    position: relative;
    margin-top: 16px;
}

.pmi-event-carousel[hidden] {
    display: none;
}

.pmi-event-carousel__viewport {
    overflow: hidden;
    border-radius: 8px;
}

.pmi-event-carousel__track {
    display: flex;
    transition: transform .35s ease;
}

.pmi-event-carousel__slide {
    flex: 0 0 auto;
    padding: 0 4px;
    box-sizing: border-box;
}

/*
 * Tile tetap 16:9 supaya foto potret dan lanskap tetap sebaris, tetapi
 * gambarnya dimuat utuh di dalamnya (contain) — tidak ada bagian poster yang
 * terpotong. Latar abu-abu muda mengisi sisa tile.
 */
.pmi-event-carousel__slide img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #f1f3f4;
    border-radius: 6px;
    display: block;
    cursor: zoom-in;
}

.pmi-event-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    font-size: 20px;
    line-height: 1;
    color: #3c4043;
    cursor: pointer;
}

.pmi-event-carousel__nav[hidden] {
    display: none;
}

.pmi-event-carousel__nav--prev {
    left: -6px;
}

.pmi-event-carousel__nav--next {
    right: -6px;
}

.pmi-event-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.pmi-event-carousel__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #dadce0;
    cursor: pointer;
}

.pmi-event-carousel__dot.is-active {
    background: #0b8043;
}

/* -------------------------------------------------------------- Lightbox */
.pmi-event-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.pmi-event-lightbox[hidden] {
    display: none;
}

.pmi-event-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .88);
    cursor: zoom-out;
}

.pmi-event-lightbox__figure {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.pmi-event-lightbox__figure img {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}

.pmi-event-lightbox__counter {
    color: #e8eaed;
    font-size: 13px;
    letter-spacing: .4px;
}

.pmi-event-lightbox__close {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 2;
    border: 0;
    background: none;
    font-size: 34px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
}

.pmi-event-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    font-size: 28px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
}

.pmi-event-lightbox__nav:hover {
    background: rgba(255, 255, 255, .3);
}

.pmi-event-lightbox__nav[hidden] {
    display: none;
}

.pmi-event-lightbox__nav--prev {
    left: 16px;
}

.pmi-event-lightbox__nav--next {
    right: 16px;
}

@media (max-width: 575.98px) {
    .pmi-event-lightbox {
        padding: 12px;
    }

    .pmi-event-lightbox__nav {
        width: 36px;
        height: 36px;
        font-size: 22px;
    }

    .pmi-event-lightbox__nav--prev {
        left: 6px;
    }

    .pmi-event-lightbox__nav--next {
        right: 6px;
    }
}