/* vkurko/calendar in the panel's palette. guava/calendar's own theme.css needs a Tailwind build, which the project does not have. */

[data-calendar-widget] .ec {
    --ec-bg-color: var(--color-white);
    --ec-border-color: var(--gray-200);
    /* A tinted column would look like the invoiced events' primary tint; today shows in its heading instead. */
    --ec-today-bg-color: var(--ec-bg-color);
    --ec-button-bg-color: transparent;
    --ec-button-border-color: var(--gray-300);
    --ec-button-text-color: var(--gray-950);
    --calendar-button-hover-bg-color: var(--gray-50);
    --ec-button-active-bg-color: var(--primary-600);
    --ec-button-active-border-color: var(--primary-600);
    --ec-button-active-text-color: var(--color-white);
    --calendar-slot-label-color: var(--gray-500);
}

.dark [data-calendar-widget] .ec {
    --ec-bg-color: var(--gray-900);
    --ec-border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    --ec-today-bg-color: var(--ec-bg-color);
    --ec-button-border-color: var(--gray-700);
    --ec-button-text-color: var(--color-white);
    --calendar-button-hover-bg-color: color-mix(in oklab, var(--gray-400) 10%, transparent);
    --calendar-slot-label-color: var(--gray-400);
}

[data-calendar-widget] .ec-title {
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
}

[data-calendar-widget] .ec-button {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
}

/* vkurko/calendar styles hover like the active view. Only with a mouse: on a tablet a tapped button would keep it. */
[data-calendar-widget] .ec-button:not(:disabled):not(.ec-active):hover {
    background-color: var(--ec-button-bg-color);
    border-color: var(--ec-button-border-color);
    color: var(--ec-button-text-color);

    @media (hover: hover) {
        background-color: var(--calendar-button-hover-bg-color);
    }
}

/* On a phone the title gets a row of its own and the views share one evenly. */
@media (width < 48rem) {
    [data-calendar-widget] .ec-toolbar {
        flex-wrap: wrap;
        row-gap: calc(var(--spacing) * 3);

        > .ec-center {
            order: -1;
            flex-basis: 100%;
            justify-content: center;
        }

        > .ec-end {
            flex-basis: 100%;
            flex-wrap: nowrap;
            column-gap: calc(var(--spacing) * 2);

            > .ec-button {
                flex: 1;
                padding-inline: 0;
            }
        }
    }
}

/* "Today" while today is shown: dimmed like Filament's disabled buttons, not grayed out by the browser. */
[data-calendar-widget] .ec-button:disabled {
    color: var(--ec-button-text-color);
    opacity: 0.7;
}

[data-calendar-widget] .ec-main {
    border-radius: var(--radius-lg);
}

[data-calendar-widget] .ec-col-head {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
}

[data-calendar-widget] :is(.ec-col-head.ec-today, .ec-list .ec-today .ec-day-head) {
    color: var(--primary-600);
    font-weight: var(--font-weight-semibold);
}

.dark [data-calendar-widget] :is(.ec-col-head.ec-today, .ec-list .ec-today .ec-day-head) {
    color: var(--primary-400);
}

[data-calendar-widget] .ec-day-grid .ec-today .ec-day-head time {
    border-radius: 9999px;
    padding-inline: 0.45em;
    background-color: var(--primary-600);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
}

[data-calendar-widget] .ec-slot {
    color: var(--calendar-slot-label-color);
    font-size: var(--text-xs);
}

/* Like Filament's badges; each event's fi-color-* class sets --color-*. The list view draws rows with a colored marker instead. */
[data-calendar-widget] :is(.ec-time-grid, .ec-day-grid) .ec-event {
    padding: 2px 4px;
    border-inline-start: 3px solid var(--color-500);
    border-radius: var(--radius-md);
    background-color: var(--color-50);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-600) 10%, transparent);
    color: var(--color-700);
    font-weight: var(--font-weight-medium);
}

.dark [data-calendar-widget] :is(.ec-time-grid, .ec-day-grid) .ec-event {
    border-inline-start-color: var(--color-400);
    background-color: color-mix(in oklab, var(--color-400) 10%, var(--gray-900));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-400) 20%, transparent);
    color: var(--color-300);
}

/* A short event would cut „Kunde · Spezialist“ mid-line; one line ends in an ellipsis instead, and the list view shows it whole. */
[data-calendar-widget] .ec-time-grid .ec-event-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-calendar-widget] .ec-list .ec-event-tag {
    background-color: var(--color-500);
}

/* guava/calendar always hands its header and footer actions to the section, which then draws them as empty bands. */
.fi-section:has(> .fi-section-content-ctn > .fi-section-content > [data-calendar-widget]) {
    > .fi-section-header,
    > .fi-section-content-ctn > .fi-section-footer {
        display: none;
    }

    /* The line below the hidden header. Filament's rule sits in a cascade layer, so this unlayered one wins. */
    > .fi-section-content-ctn {
        border-top-width: 0;
    }
}

/* The current time in the HYCYS colour across the whole week, thicker than the half-hour lines. The package puts it in today's column only, by an inline grid-column. */
[data-calendar-widget] .ec {
    --ec-now-indicator-color: var(--primary-600);
}

[data-calendar-widget] .ec-time-grid .ec-now-indicator {
    grid-column: 2 / -1 !important;
    border-block-start-width: 3px;
}