/* ============================================================
   Community Calendar — Past Lives Makerspace
   ============================================================ */

.pl-calendar-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pl-calendar-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.pl-calendar-topbar__left,
.pl-calendar-topbar__right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pl-calendar-view-toggle {
    display: flex;
    background: var(--hub-card-bg);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow: hidden;
}

.pl-calendar-view-toggle__btn {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--hub-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.pl-calendar-view-toggle__btn--active {
    background: var(--color-tuscan-yellow);
    color: #1a1a2e;
}

.pl-calendar-clock {
    text-align: right;
    line-height: 1.2;
}

.pl-calendar-clock__time {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--hub-text);
    font-family: 'Lato', sans-serif;
}

.pl-calendar-clock__date {
    display: block;
    font-size: 0.75rem;
    color: var(--hub-text-muted);
}

.pl-calendar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.pl-calendar-filter {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1.5px solid var(--filter-color, #888);
    background: transparent;
    color: var(--hub-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
    opacity: 0.5;
}

.pl-calendar-filter--active {
    background: color-mix(in srgb, var(--filter-color, #888) 18%, transparent);
    color: var(--hub-text);
    opacity: 1;
}

.pl-calendar-filter__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pl-calendar-empty-notice {
    font-size: 0.8125rem;
    color: var(--hub-text-muted);
}

/* ── Week / Month navigation bar ── */
.pl-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0 0.625rem;
}

.pl-calendar-nav__label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--hub-text-main, #E8EAED);
    letter-spacing: 0.01em;
}

.pl-calendar-nav__btn {
    background: none;
    border: none;
    color: var(--hub-text-muted, #96ACBB);
    cursor: pointer;
    padding: 0.3125rem 0.5rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

.pl-calendar-nav__btn:hover {
    background: rgba(255,255,255,0.07);
    color: var(--hub-text-main, #E8EAED);
}

[data-theme="light"] .pl-calendar-nav__label { color: #1D1E1E; }
[data-theme="light"] .pl-calendar-nav__btn { color: #666; }
[data-theme="light"] .pl-calendar-nav__btn:hover { background: rgba(0,0,0,0.06); color: #1D1E1E; }

.pl-calendar-grid {
    background: var(--hub-card-bg);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
}

.pl-calendar-grid--week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.pl-calendar-grid--month {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.pl-calendar-grid__week-header {
    padding: 0.5rem 0;
    font-size: 1.0625rem;
    font-weight: 600;
    text-align: center;
    color: var(--hub-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pl-calendar-grid__day {
    padding: 0.375rem 0.375rem 0.25rem;
    border-right: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    height: 128px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pl-calendar-grid--week .pl-calendar-grid__day {
    height: 176px;
}

.pl-calendar-grid__day--today {
    background: rgba(238, 180, 75, 0.06);
    position: relative;
}

.pl-calendar-grid__day--today::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: #e84a4a;
    box-shadow: 0 0 6px rgba(232, 74, 74, 0.55);
    z-index: 1;
}

.pl-calendar-grid__day--faded {
    opacity: 0.4;
}

.pl-calendar-grid__day-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.25rem;
    gap: 0;
    flex-shrink: 0;
}

.pl-calendar-grid--week .pl-calendar-grid__day-header {
    flex-direction: row;
    justify-content: center;
    gap: 0.375rem;
}

.pl-calendar-grid__day-name {
    font-size: 1.0625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hub-text-muted);
}

.pl-calendar-grid__day-num {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--hub-text-muted);
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.pl-calendar-grid__day-num--today {
    background: var(--color-tuscan-yellow);
    color: #1a1a2e;
    font-weight: 700;
}

.pl-calendar-grid__day-chips {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.pl-calendar-grid__chip {
    display: flex;
    align-items: flex-start;
    gap: 3px;
    padding: 1px 4px 1px 5px;
    border: 0;
    border-left: 2px solid var(--chip-color, #888);
    border-radius: 2px;
    background: color-mix(in srgb, var(--chip-color, #888) 18%, transparent);
    color: var(--hub-text);
    font-size: 0.9375rem;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    white-space: normal;
    transition: background 0.15s;
}

.pl-calendar-grid__chip:hover {
    background: color-mix(in srgb, var(--chip-color, #888) 32%, transparent);
}

.pl-calendar-grid__chip--live {
    border-left-color: #e84a4a;
    background: color-mix(in srgb, #e84a4a 22%, transparent);
    box-shadow: inset 0 0 0 1px rgba(232, 74, 74, 0.45);
}

.pl-calendar-grid__chip--live:hover {
    background: color-mix(in srgb, #e84a4a 32%, transparent);
}

.pl-calendar-grid__chip-time {
    font-weight: 700;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--hub-text-muted);
    flex-shrink: 0;
}

/* Wrap to at most two lines so longer titles stay readable instead of
   truncating after a couple of words. */
.pl-calendar-grid__chip-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 0;
    flex: 1;
}

.pl-calendar-grid__day-chips--compact .pl-calendar-grid__chip {
    font-size: 0.8125rem;
    line-height: 1.4;
}

.pl-calendar-grid__more {
    font-size: 0.8125rem;
    color: var(--hub-text-muted);
    padding: 0 4px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* "+N" overflow indicator as a clickable toggle — expands the day cell in place
   to reveal every event, then flips to "Show less". */
.pl-calendar-grid__more--toggle {
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s;
}

.pl-calendar-grid__more--toggle:hover {
    color: var(--hub-text);
}

/* Expanded day: let the cell grow past its fixed height so the revealed chips
   aren't clipped. The grid row grows with it. Beats the week/month height rules
   via the doubled class selector. */
.pl-calendar-grid__day.pl-calendar-grid__day--expanded {
    height: auto;
    overflow: visible;
}

.pl-calendar-grid__day--expanded .pl-calendar-grid__day-chips {
    overflow: visible;
}

.pl-calendar-divider {
    height: 1px;
    margin: 1.5rem 0;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.12) 25%,
        rgba(255, 255, 255, 0.28) 50%,
        rgba(255, 255, 255, 0.12) 75%,
        transparent 100%
    );
}

[data-theme="light"] .pl-calendar-divider {
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.1) 25%,
        rgba(0, 0, 0, 0.22) 50%,
        rgba(0, 0, 0, 0.1) 75%,
        transparent 100%
    );
}

.pl-calendar-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 0.25rem;
}

.pl-calendar-list__item {
    position: relative;
    display: flex;
    background: var(--hub-card-bg);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 4px solid var(--event-color, #888);
    /* No padding of its own and no gap: each child brings its own, so an event photo can
       bleed to the card's edges instead of floating inside a frame. overflow clips it to
       the rounded corner. */
    padding: 0;
    overflow: hidden;
    align-items: stretch;
    transition: box-shadow 0.3s, background 0.3s;
}

.pl-calendar-list__item > .pl-calendar-list__time {
    padding: 0.875rem 0 0.875rem 1rem;
}

.pl-calendar-list__item > .pl-calendar-list__body {
    padding: 0.875rem 1rem;
}

.pl-calendar-list__item--flash {
    box-shadow: 0 0 0 2px var(--event-color, #888);
    background: color-mix(in srgb, var(--event-color, #888) 12%, var(--hub-card-bg));
}

/* Hovering a calendar chip up in the grid highlights its matching detail card
   in the list below, so it's easy to connect the two. */
.pl-calendar-list__item--highlight {
    box-shadow: 0 0 0 2px var(--event-color, #888);
    background: color-mix(in srgb, var(--event-color, #888) 12%, var(--hub-card-bg));
}

.pl-calendar-list__item--live {
    border-left-color: #e84a4a;
    box-shadow: 0 0 0 1px rgba(232, 74, 74, 0.35);
}

.pl-calendar-list__live-pill {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px 2px 6px;
    border-radius: 999px;
    background: #e84a4a;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pl-calendar-list__live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: pl-live-pulse 1.4s ease-in-out infinite;
}

@keyframes pl-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}

.pl-calendar-list__time {
    flex-shrink: 0;
    min-width: 72px;
    text-align: right;
}

.pl-calendar-list__time-day {
    display: block;
    font-size: 0.6875rem;
    color: var(--hub-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pl-calendar-list__time-hour {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--hub-text);
    font-family: 'Lato', sans-serif;
}

.pl-calendar-list__body {
    flex: 1;
    min-width: 0;
}

/* An event's photo is a panel of the row, not a sticker on it: it bleeds to the card's own
   edges and stretches the full height, which is why the row hands its padding to its children
   (below) rather than carrying it itself. It closes the row so a photoless row's text still
   lines up with its neighbours'. Hidden on phones, where the row has no width to spare. */
.pl-calendar-list__thumb {
    flex: 0 0 150px;
    align-self: stretch;
    min-height: 104px;
    overflow: hidden;
}

.pl-calendar-list__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 900px) {
    .pl-calendar-list__thumb {
        flex-basis: 132px;
    }
}

@media (max-width: 640px) {
    .pl-calendar-list__thumb {
        display: none;
    }
}

.pl-calendar-list__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--hub-text);
    line-height: 1.3;
}

a.pl-calendar-list__title--link {
    color: var(--hub-text);
    text-decoration: none;
}

a.pl-calendar-list__title--link:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Who a FOG-native event is for, badged on every row of the Events tab (#505). */
.pl-calendar-list__audience {
    margin-top: 0.375rem;
}

.pl-calendar-list__desc {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--hub-text-muted);
    line-height: 1.5;
}

.pl-calendar-list__location {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--hub-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.pl-calendar-list__guild {
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pl-calendar-list__guild--with-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pl-calendar-list__register {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--color-tuscan-yellow) 15%, transparent);
    color: var(--color-tuscan-yellow);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: background 0.15s;
}

.pl-calendar-list__register:hover {
    background: color-mix(in srgb, var(--color-tuscan-yellow) 28%, transparent);
}

/* Events-tab management row: sync flag/diagnostics on the left, Edit/Delete on the right. */
.pl-calendar-list__manage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-top: 0.6rem;
}

.pl-calendar-list__manage-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

/* The compact "on Google" flag when there are no management controls (grid list +
   non-admin Events tab). */
.pl-calendar-list__flag {
    margin-top: 0.4rem;
}

/* Events-tab pagination — mirrors the hub's standard Prev/Next control. */
.pl-events-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.pl-calendar-list-note {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--hub-text-muted);
}

.pl-calendar-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--hub-text-muted);
}

.pl-calendar-empty__hint {
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

[data-theme="light"] .pl-calendar-view-toggle {
    border-color: rgba(0,0,0,0.1);
}

[data-theme="light"] .pl-calendar-grid {
    border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .pl-calendar-grid__day {
    border-color: rgba(0,0,0,0.06);
}

[data-theme="light"] .pl-calendar-list__item {
    border-color: rgba(0,0,0,0.08);
    border-left-color: var(--event-color, #888);
}

[data-theme="light"] .pl-calendar-export__dropdown {
    border-color: rgba(0,0,0,0.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.pl-modal-section-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hub-text-muted, #96ACBB);
    margin: 1.25rem 0 0.75rem;
}

.pl-color-input {
    width: 56px;
    height: 36px;
    padding: 2px;
}

.pl-calendar-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 0 0.25rem;
}

.pl-calendar-pagination__btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--hub-card-bg);
    color: var(--hub-text);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.pl-calendar-pagination__btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.08);
}

.pl-calendar-pagination__btn--disabled {
    opacity: 0.35;
    cursor: default;
}

.pl-calendar-pagination__label {
    font-size: 0.8125rem;
    color: var(--hub-text-muted);
    min-width: 50px;
    text-align: center;
}

[data-theme="light"] .pl-calendar-pagination__btn {
    border-color: rgba(0,0,0,0.1);
}

[data-theme="light"] .pl-calendar-pagination__btn:hover:not(:disabled) {
    background: rgba(0,0,0,0.05);
}

/* ── Loading indicator ── */
.pl-calendar-loading-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 10;
    overflow: hidden;
    border-radius: 0 0 2px 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s;
}

.pl-calendar-loading-bar.htmx-request {
    opacity: 1;
}

.pl-calendar-loading-bar::after {
    content: '';
    display: block;
    position: absolute;
    left: -40%;
    width: 40%;
    height: 100%;
    background: var(--color-tuscan-yellow);
    animation: pl-loading-slide 1s ease-in-out infinite;
    border-radius: 2px;
}

@keyframes pl-loading-slide {
    0%   { left: -40%; }
    100% { left: 100%; }
}

@media (max-width: 600px) {
    .pl-calendar-grid__day-name {
        display: none;
    }
    /* Day columns are ~45px here — text clips mid-glyph, so render chips
       as slim color bars instead. The list below the grid carries the
       titles and times; the chip stays tappable and keeps its title attr. */
    .pl-calendar-grid__chip {
        min-height: 12px;
        padding: 2px 0 2px 3px;
    }
    .pl-calendar-grid__chip-time,
    .pl-calendar-grid__chip-title {
        display: none;
    }
    .pl-calendar-list__item {
        flex-direction: column;
        gap: 0.5rem;
    }
    .pl-calendar-list__time {
        text-align: left;
        display: flex;
        gap: 0.5rem;
        align-items: baseline;
    }
}