.event-widget-link {
    text-decoration: none;
    color: var(--color-highlight);
}
.event-widget-link:hover {
    text-decoration: none;
    color: var(--color-highlight);
}

/* calendar widget (App\Events\DateView) */
.dateview table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}
.dateview .dv-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.dateview .dv-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: var(--font-weight-strong);
}
.dateview .dv-navlink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--color-highlight);
    text-decoration: none;
}
.dateview .dv-navlink:hover {
    background: color-mix(in srgb, var(--color-highlight) 14%, transparent);
}
.dateview .dv-today {
    padding: 0 10px;
    border: 1px solid var(--color-highlight);
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 400;
    line-height: 1.6;
    text-decoration: none;
}
.dateview .dv-today:hover {
    background: var(--color-highlight);
    color: var(--color-highlight-invert);
}
.dateview th {
    padding: 4px 0;
    text-align: center;
    font-size: .68rem;
    font-weight: var(--font-weight-strong);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.dateview th.dv-titlecell {
    padding: 0;
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
}
.dateview td {
    vertical-align: top;
    padding: 2px 3px 4px 3px;
    border-top: 1px solid var(--color-border-light-1);
    background: transparent;
    font-size: .8em;
}
.dateview-monthbig td,
.dateview-week7 td {
    height: 78px;
}
.dateview td.weekend {
    background: color-mix(in srgb, var(--color-text-muted) 7%, transparent);
}
.dateview td.outside {
    opacity: .45;
}
.dateview td.today {
    background: color-mix(in srgb, var(--color-highlight) 8%, transparent);
    box-shadow: inset 0 2px 0 var(--color-highlight);
}
.dateview-monthbig td:hover,
.dateview-week7 td:hover {
    background: color-mix(in srgb, var(--color-highlight) 6%, transparent);
}

/* the day number */
.dateview .datetitle {
    margin-bottom: 2px;
    font-size: .8rem;
    color: var(--color-text-muted);
}
.dateview .datetitle span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
}
.dateview td.today .datetitle span {
    background: var(--color-highlight);
    color: var(--color-highlight-invert);
    font-weight: var(--font-weight-strong);
}

/* an event: a chip with its time and name */
.dateview .dv-event {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 2px;
    padding: 1px 5px;
    border-left: 3px solid var(--color-highlight);
    border-radius: 3px;
    background: color-mix(in srgb, var(--color-highlight) 12%, transparent);
    font-size: .75rem;
    line-height: 1.25;
    overflow: hidden;
}
.dateview .dv-event.dv-wholeday {
    border-left-color: var(--color-highlight2);
    background: color-mix(in srgb, var(--color-highlight2) 16%, transparent);
}
.dateview .dv-event.dv-past {
    opacity: .55;
}
.dateview .dv-time {
    flex: none;
    font-weight: var(--font-weight-strong);
    font-variant-numeric: tabular-nums;
}
.dateview .dv-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dateview .dv-event a {
    color: inherit;
    text-decoration: none;
}
.dateview .dv-event a:hover {
    text-decoration: underline;
}
.dateview .dv-more {
    margin: 2px 0 0 4px;
    font-size: .7rem;
    color: var(--color-text-muted);
    cursor: default;
}
/* narrow cells: time above the name, which may take two lines */
.dateview-monthbig .dv-timed,
.dateview-week7 .dv-timed {
    flex-direction: column;
    gap: 0;
}
.dateview-monthbig .dv-timed .dv-name,
.dateview-week7 .dv-timed .dv-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
}

/* small month: a dot marks the days with events, the click shows them below */
.dateview-monthsmall td {
    height: 34px;
    text-align: center;
    font-size: .85em;
}
.dateview-monthsmall td.event {
    font-weight: var(--font-weight-strong);
}
.dateview-monthsmall td.event::after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    margin: 1px auto 0 auto;
    border-radius: 50%;
    background: var(--color-highlight);
}
.dateview-monthsmall .dvdate {
    margin-top: 10px;
}
.dateview-monthsmall .dvdate .dv-name {
    white-space: normal;
}

/* calendar widget as a list (the next N events) */
.events-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 -8px;
    padding: 7px 8px;
    border-radius: .3rem;
}
.events-list-item:hover {
    background: var(--color-surface-light-1);
}
.events-list-date {
    flex: 0 0 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0 5px 0;
    border-radius: .3rem;
    background: color-mix(in srgb, var(--color-highlight) 13%, transparent);
    line-height: 1.1;
    text-align: center;
}
.events-list-item.wholeday .events-list-date {
    background: color-mix(in srgb, var(--color-highlight2) 18%, transparent);
}
.events-list-item.today .events-list-date {
    background: var(--color-highlight);
    color: var(--color-highlight-invert);
}
.events-list-date .dow,
.events-list-date .month {
    font-size: .66rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .75;
}
.events-list-date .day {
    font-size: 1.3rem;
    font-weight: var(--font-weight-strong);
}
.events-list-text {
    flex: 1 1 0;
    min-width: 0;
}
.events-list-title {
    display: block;
    font-weight: var(--font-weight-strong);
    line-height: 1.3;
}
.events-list-title a {
    color: inherit;
    text-decoration: none;
}
.events-list-title a:hover {
    color: var(--color-highlight);
}
.events-list-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    color: var(--color-text-muted);
}
.events-list-relative {
    color: var(--color-highlight);
    font-weight: var(--font-weight-strong);
}
.events-list-relative::before {
    content: '·';
    margin-right: 8px;
    color: var(--color-text-faint-3);
    font-weight: 400;
}
.events-list-status {
    display: block;
    margin-top: 2px;
    font-size: .8rem;
}
.events-list-arrow {
    color: var(--color-text-faint-3);
    text-decoration: none;
    transition: transform .15s ease, color .15s ease;
}
.events-list-item:hover .events-list-arrow {
    color: var(--color-highlight);
    transform: translateX(3px);
}

img.event-image {
    max-width: 100%;
}

.event-single.event-layout-stretchtop img.event-image {
    width: 100%;
}

.event-widget-link.event-layout-stretchtop img.event-image {
    width: 100%;
}

.event-slots label {
    border: 1px solid #ccc;
    padding: 3px 10px;
    margin: 0 0 5px;
    display: block;
    line-height: 1.2em;
}
.event-slots label:hover {
    border-color: var(--color-highlight);
}
.event-slots {
    margin-bottom: 10px;
}