/**
 * Modern ICS Calendar styling (Wohnheim Campus Flugplatz)
 *
 * Shared design tokens + list view + month view.
 * All colors derive from the theme palette via CSS variables, so
 * light/dark mode (light-dark() presets) works automatically.
 *
 * DOM facts (verified on live page):
 *   List:  section.ics-calendar.layout-list
 *            > article.ics-calendar-list-wrapper
 *              > h3.ics-calendar-label / div.ics-calendar-date-wrapper
 *              > h4.ics-calendar-date
 *              > dl.events > dt.time + dd.event (siblings!)
 *          .layout-list sits on the SAME element as .ics-calendar,
 *          so it must be chained, NOT used as a descendant.
 *          Double-class selectors (.ics-calendar.ics-calendar...) are
 *          used deliberately to beat plugin default specificity.
 *   Month: section.ics-calendar.layout-month
 *            > table.ics-calendar-month-grid
 */

/* ---------------------------------------------------------------
   Design tokens (shared by list and month view)
--------------------------------------------------------------- */
.ics-calendar {
  --fxp-accent: var(--wp--preset--color--accent-1, #0062a1);
  --fxp-accent-soft: color-mix(in srgb, var(--fxp-accent) 14%, transparent);
  --fxp-text: var(--wp--preset--color--contrast, #111111);
  --fxp-muted: color-mix(in srgb, var(--fxp-text) 68%, transparent);
  --fxp-surface: var(--wp--preset--color--base, #ffffff);
  --fxp-elev-1: color-mix(in srgb, var(--fxp-text) 5%, var(--fxp-surface));
  --fxp-elev-2: color-mix(in srgb, var(--fxp-text) 10%, var(--fxp-surface));
  --fxp-elev-3: color-mix(in srgb, var(--fxp-text) 16%, var(--fxp-surface));
  --fxp-border: color-mix(in srgb, var(--fxp-text) 16%, transparent);
  --fxp-radius: 12px;
  color: var(--fxp-text);
}

.ics-calendar,
.ics-calendar *,
.ics-calendar *::before,
.ics-calendar *::after {
  box-sizing: border-box;
}

/* ===============================================================
   LIST VIEW
=============================================================== */

/* Container card */
.ics-calendar.ics-calendar.layout-list {
  background: var(--fxp-elev-1) !important;
  color: var(--fxp-text) !important;
  border: 1px solid var(--fxp-border);
  border-radius: var(--fxp-radius);
  padding: 1.5rem;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--fxp-text) 8%, transparent);
}

/* Month heading */
.ics-calendar.ics-calendar.layout-list .ics-calendar-label {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--fxp-accent) !important;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--fxp-accent-soft);
  margin-bottom: 1.25rem;
}

/* Date heading: accent left border + entrance animation */
.ics-calendar.ics-calendar.layout-list .ics-calendar-date-wrapper {
  margin-bottom: 1.5rem;
  padding-left: 1rem;
  border-left: 3px solid var(--fxp-accent);
  animation: fxp-fade-in 0.4s ease both;
}

.ics-calendar.ics-calendar.layout-list .ics-calendar-date {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fxp-muted) !important;
  margin-bottom: 0.75rem;
}

/* Event rows */
.ics-calendar.ics-calendar.layout-list .events {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Time badge (dt.time is a SIBLING of dd.event — selector must not
   require an .event ancestor). Double class beats plugin defaults. */
.ics-calendar.ics-calendar.layout-list dt.time,
.ics-calendar.ics-calendar.layout-list .time,
.ics-calendar.ics-calendar.layout-list .time a {
  display: inline-block;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fxp-accent) !important;
  background: var(--fxp-accent-soft) !important;
  opacity: 1 !important;
  border-radius: 8px;
  padding: 0.25rem 0.6rem;
  margin-right: 0.75rem;
  margin-bottom: 0.4rem;
  white-space: nowrap;
  text-decoration: none;
  align-self: flex-start;
}

.ics-calendar.ics-calendar.layout-list .time .end_time,
.ics-calendar.ics-calendar.layout-list .time .end_time a {
  font-weight: 400;
  color: var(--fxp-muted) !important;
  background: transparent !important;
  padding: 0;
  margin: 0;
}

/* Event card: subtle elevation with hover step */
.ics-calendar.ics-calendar.layout-list dd.event {
  background: var(--fxp-elev-2) !important;
  color: var(--fxp-text) !important;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  margin: 0 0 0.75rem 0;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.ics-calendar.ics-calendar.layout-list dd.event:hover {
  background: var(--fxp-elev-3) !important;
  transform: translateX(2px);
}

/* Title / location inside the event card */
.ics-calendar.ics-calendar.layout-list .event .title,
.ics-calendar.ics-calendar.layout-list .event .title a {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--fxp-text) !important;
  opacity: 1 !important;
  text-decoration: none;
}

.ics-calendar.ics-calendar.layout-list .event .descloc,
.ics-calendar.ics-calendar.layout-list .event .descloc a,
.ics-calendar.ics-calendar.layout-list .event .location,
.ics-calendar.ics-calendar.layout-list .event .location a {
  display: block;
  font-size: 0.925rem;
  color: var(--fxp-muted) !important;
  opacity: 1 !important;
  margin-top: 0.15rem;
  text-decoration: none;
}

/* Event description inside the event card (dark-mode safe) */
.ics-calendar.ics-calendar.layout-list .event .eventdesc,
.ics-calendar.ics-calendar.layout-list .event .eventdesc p,
.ics-calendar.ics-calendar.layout-list .event .eventdesc a {
  font-size: 0.875rem;
  color: var(--fxp-text) !important;
  opacity: 0.85 !important;
}

.ics-calendar.ics-calendar.layout-list .event .eventdesc {
  margin-top: 0.4rem;
}

.ics-calendar.ics-calendar.layout-list .event .eventdesc p {
  margin: 0;
}

/* ===============================================================
   MONTH VIEW
=============================================================== */

/* Container card */
.ics-calendar.ics-calendar.layout-month {
  background: var(--fxp-elev-1) !important;
  color: var(--fxp-text) !important;
  border: 1px solid var(--fxp-border);
  border-radius: var(--fxp-radius);
  padding: 1.25rem;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--fxp-text) 8%, transparent);
}

/* Reset: strip the plugin's hardcoded light backgrounds
   (multiday events are re-tinted below) */
.ics-calendar.ics-calendar.layout-month table.ics-calendar-month-grid td,
.ics-calendar.ics-calendar.layout-month table.ics-calendar-month-grid td > *:not(li):not(.multiday) {
  background-color: transparent !important;
  color: var(--fxp-text) !important;
}

/* Month/year heading */
.ics-calendar.ics-calendar.layout-month .ics-calendar-label {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--fxp-accent) !important;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--fxp-accent-soft);
  margin-bottom: 1rem;
}

/* Month selector dropdown */
.ics-calendar.ics-calendar.layout-month select.ics-calendar-select {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fxp-text) !important;
  background-color: var(--fxp-elev-2) !important;
  border: 1px solid var(--fxp-border);
  border-radius: 10px;
  padding: 0.4rem 2rem 0.4rem 0.9rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23888888' stroke-width='2' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  margin-bottom: 0.5rem;
}

/* Grid: graduated structure
   - header row:    elev-3
   - weekday cells: elev-2
   - weekend cells: elev-3 (one step deeper = visible banding)
   - today:         accent tint
   - hover:         elev-3 */
.ics-calendar.ics-calendar.layout-month table.ics-calendar-month-grid {
  border-collapse: separate;
  border-spacing: 0;
  background: transparent !important;
}

.ics-calendar.ics-calendar.layout-month table.ics-calendar-month-grid th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fxp-muted) !important;
  background: var(--fxp-elev-3) !important;
  border-bottom: 2px solid var(--fxp-border);
  padding: 0.5rem 0.4rem;
}

.ics-calendar.ics-calendar.layout-month table.ics-calendar-month-grid td {
  border: 1px solid var(--fxp-border) !important;
  background: var(--fxp-elev-2) !important;
  color: var(--fxp-text) !important;
  vertical-align: top;
  padding: 0.4rem;
  position: relative;
  transition: background-color 0.15s ease;
}

/* Weekend columns (Saturday, Sunday) one elevation step deeper */
.ics-calendar.ics-calendar.layout-month table.ics-calendar-month-grid td:nth-child(6),
.ics-calendar.ics-calendar.layout-month table.ics-calendar-month-grid td:nth-child(7) {
  background: var(--fxp-elev-3) !important;
}

/* Today: accent tint (class names covered for both plugin variants) */
.ics-calendar.ics-calendar.layout-month table.ics-calendar-month-grid td.today,
.ics-calendar.ics-calendar.layout-month table.ics-calendar-month-grid td.ics-calendar-today {
  background: var(--fxp-accent-soft) !important;
}

.ics-calendar.ics-calendar.layout-month table.ics-calendar-month-grid td:hover {
  background: var(--fxp-elev-3) !important;
  z-index: 50;
}

/* Events inside cells */
.ics-calendar.ics-calendar.layout-month .time,
.ics-calendar.ics-calendar.layout-month .time a {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fxp-accent) !important;
  opacity: 1 !important;
  text-decoration: none;
}

.ics-calendar.ics-calendar.layout-month .title,
.ics-calendar.ics-calendar.layout-month .title a {
  font-weight: 600;
  color: var(--fxp-text) !important;
  opacity: 1 !important;
  text-decoration: none;
}

.ics-calendar.ics-calendar.layout-month .location,
.ics-calendar.ics-calendar.layout-month .descloc {
  color: var(--fxp-muted) !important;
}

/* Hover tooltip */
.ics-calendar.ics-calendar.layout-month li.event {
  position: relative;
}

.ics-calendar.ics-calendar.layout-month li.event:hover {
  z-index: 60;
}

.ics-calendar.ics-calendar.layout-month .descloc.hover_block {
  z-index: 100;
  background: var(--fxp-surface) !important;
  border: 1px solid var(--fxp-border);
  border-radius: 10px;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--fxp-text) 25%, transparent);
  padding: 0.75rem 1rem;
  min-width: 200px;
  max-width: 280px;
  color: var(--fxp-text) !important;
}

.ics-calendar.ics-calendar.layout-month .descloc.hover_block .time_in_hover_block {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fxp-accent) !important;
}

.ics-calendar.ics-calendar.layout-month .descloc.hover_block .title_in_hover_block .title {
  font-weight: 600;
  color: var(--fxp-text) !important;
  display: block;
  margin: 0.25rem 0;
}

.ics-calendar.ics-calendar.layout-month .descloc.hover_block .location {
  color: var(--fxp-muted) !important;
  font-size: 0.925rem;
}

/* Event description inside the tooltip: dark-mode safe */
.ics-calendar.ics-calendar.layout-month .descloc.hover_block .eventdesc,
.ics-calendar.ics-calendar.layout-month .descloc.hover_block .eventdesc p,
.ics-calendar.ics-calendar.layout-month .descloc.hover_block .eventdesc a {
  font-size: 0.875rem;
  color: var(--fxp-text) !important;
  opacity: 0.85 !important;
}

.ics-calendar.ics-calendar.layout-month .descloc.hover_block .eventdesc {
  margin-top: 0.4rem;
}

.ics-calendar.ics-calendar.layout-month .descloc.hover_block .eventdesc p {
  margin: 0;
}

/* Multiday events: readable accent tint */
.ics-calendar.ics-calendar.layout-month table.ics-calendar-month-grid .event.multiday,
.ics-calendar.ics-calendar.layout-month table.ics-calendar-month-grid .multiday {
  background: var(--fxp-accent-soft) !important;
  color: var(--fxp-text) !important;
  border-radius: 8px;
  padding: 0.2rem 0.4rem;
}

.ics-calendar.ics-calendar.layout-month table.ics-calendar-month-grid .event.multiday .title,
.ics-calendar.ics-calendar.layout-month table.ics-calendar-month-grid .multiday .title {
  color: var(--fxp-text) !important;
  font-weight: 600;
}

/* Mobile: month view collapses to a list */
@media (max-width: 782px) {
  .ics-calendar.ics-calendar.layout-month .descloc.hover_block {
    background: transparent !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    max-width: none;
    z-index: auto;
  }

  .ics-calendar.ics-calendar.layout-month .descloc.hover_block .time_in_hover_block {
    font-weight: 600;
  }

  .ics-calendar.ics-calendar.layout-month li.event,
  .ics-calendar.ics-calendar.layout-month table.ics-calendar-month-grid td:hover {
    position: static;
    z-index: auto;
  }
}

/* ---------------------------------------------------------------
   Shared animation
--------------------------------------------------------------- */
@keyframes fxp-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}