/* Calendar module styles. Uses the design tokens of assets/css/app.css.
   --ev = event colour, --ev-text = readable text colour on it. */

/* ---------- Filters ---------- */
.cal-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); }
.cal-filters .field { flex: 0 1 auto; }
.cal-filters input, .cal-filters select { min-height: 38px; padding: 0.35rem 0.6rem; font-size: var(--text-sm); }
.cal-filter-search { flex: 1 1 200px !important; }
.cal-filter-actions { display: flex; gap: var(--space-2); }
@media (max-width: 640px) {
    /* Phones: search on its own line, then the two filters side by side, then date and buttons. */
    .cal-filter-search { flex-basis: 100% !important; }
    .cal-filters .multiselect { flex: 1 1 calc(50% - var(--space-2)); }
    .cal-filters .multiselect-button { width: 100%; max-width: none; min-width: 0; }
    .cal-filters .multiselect:last-of-type .dropdown-menu { left: auto; right: 0; }
    .cal-filter-date { flex: 1 1 auto !important; }
    .cal-print { display: none; }
}
.cal-list-date > span:last-child::first-letter { text-transform: uppercase; }

/* ---------- Event chips (month grid, all-day row) ---------- */
.cal-chip {
    display: flex; align-items: baseline; gap: 0.3em; min-width: 0;
    padding: 1px 6px; border-radius: 5px; font-size: 0.8rem; line-height: 1.35;
    color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden;
}
.cal-chip::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--ev); align-self: center; }
.cal-chip:hover { background: color-mix(in srgb, var(--ev) 14%, transparent); color: var(--text); }
.cal-chip.is-filled { background: var(--ev); color: var(--ev-text); }
.cal-chip.is-filled::before { display: none; }
.cal-chip.is-filled:hover { filter: brightness(1.08); color: var(--ev-text); }
.cal-chip-time { font-variant-numeric: tabular-nums; opacity: 0.8; font-size: 0.75rem; }
.cal-chip-title { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
/* All-day row of the week/day view: title and description, on several lines. */
.cal-chip.has-text { flex-direction: column; align-items: stretch; gap: 0; white-space: normal; padding: 3px 7px; border-radius: 6px; }
.cal-chip-desc { font-size: 0.72rem; line-height: 1.3; opacity: 0.9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tg-allday .cal-chip-title { white-space: nowrap; }

/* ---------- Month ---------- */
.cal-month-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.cal-month { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-month th { padding: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.cal-month th abbr { text-decoration: none; }
.cal-month td { vertical-align: top; height: 7.5rem; padding: 4px; border: 1px solid var(--border); border-width: 0 1px 1px 0; }
.cal-month td:last-child { border-right: 0; }
.cal-month tr:last-child td { border-bottom: 0; }
.cal-day.is-weekend { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.cal-day.is-other-month { background: var(--surface-2); }
.cal-day.is-other-month .cal-day-number { color: var(--text-muted); opacity: 0.7; }
.cal-day-number {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.8rem; height: 1.8rem; padding: 0 4px; border-radius: var(--radius-full);
    font-size: var(--text-sm); font-weight: 600; color: var(--text); text-decoration: none;
}
.cal-day-number:hover { background: var(--surface-2); color: var(--text); }
.cal-day.is-today .cal-day-number { background: var(--primary); color: var(--on-primary); }
.cal-day-events { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.cal-more { font-size: 0.75rem; font-weight: 600; padding: 0 6px; text-decoration: none; color: var(--text-muted); }
.cal-more:hover { color: var(--primary); text-decoration: underline; }
.cal-dots { display: none; }

/* Phones: dots instead of titles; tap the day number to open the day view. */
@media (max-width: 640px) {
    .cal-month td { height: 3.6rem; padding: 2px; text-align: center; }
    .cal-day-events { display: none; }
    .cal-dots { display: flex; justify-content: center; gap: 3px; margin-top: 2px; }
    .cal-dots i { width: 6px; height: 6px; border-radius: 50%; display: block; }
    .cal-day-number { min-width: 2.2rem; height: 2.2rem; }
}

/* ---------- List ---------- */
.cal-list { display: flex; flex-direction: column; gap: var(--space-5); }
.cal-list-date { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-base); margin-bottom: var(--space-2); }
.cal-list-daynum { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: var(--radius); background: var(--surface-2); font-size: 1.1rem; }
.cal-list-day.is-today .cal-list-daynum { background: var(--primary); color: var(--on-primary); }
.cal-list-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cal-list-item {
    display: flex; gap: var(--space-4); align-items: center;
    padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border);
    border-left: 5px solid var(--ev); border-radius: var(--radius); color: var(--text); text-decoration: none;
    transition: box-shadow var(--transition), transform var(--transition);
}
.cal-list-item:hover { color: var(--text); box-shadow: var(--shadow); transform: translateX(2px); }
.cal-list-time { flex: 0 0 4.5rem; font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.cal-list-time small { color: var(--text-muted); font-weight: 400; }
.cal-list-main { display: flex; flex-direction: column; min-width: 0; }
.cal-list-main .muted { font-size: var(--text-sm); }
.cal-list-more { margin-top: var(--space-5); text-align: center; }

/* ---------- Subscribe box ---------- */
.cal-subscribe { margin-top: var(--space-6); }
.cal-subscribe summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: var(--space-2); }
.cal-subscribe[open] summary { margin-bottom: var(--space-4); }
.copy-field { display: flex; gap: var(--space-2); }
.copy-field input { font-family: var(--font-mono); font-size: var(--text-sm); }


/* ---------- Event popup ---------- */
.cal-dialog { width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; position: relative; }
.cal-dialog-close { position: absolute; top: var(--space-2); right: var(--space-2); }
.cal-dialog .detail-title { font-size: var(--text-xl); padding-right: 2.5rem; }

/* ---------- Form (the shared parts – date/time, Repeat panel, weekdays – are in assets/css/app.css) ---------- */
.cal-form.is-all-day .cal-time { display: none; }
.cal-swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cal-swatch { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.35rem 0.75rem 0.35rem 0.5rem; border: 1px solid var(--border-strong); border-radius: var(--radius-full); cursor: pointer; font-size: var(--text-sm); }
.cal-swatch::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--ev, conic-gradient(red, yellow, lime, aqua, blue, magenta, red)); }
.cal-swatch-custom::before { background: conic-gradient(#e11d48, #f59e0b, #22c55e, #06b6d4, #6366f1, #e11d48); }
.cal-swatch input[type="radio"] { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.cal-swatch:has(input:checked) { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ev, var(--text)); font-weight: 600; }
.cal-swatch:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.cal-swatch input[type="color"] { width: 2rem; height: 1.5rem; padding: 0; border: 0; background: none; position: relative; z-index: 1; min-height: 0; }

/* ---------- Print ---------- */
@media print {
    .cal-filters, .cal-subscribe { display: none !important; }
    .cal-month td { height: 6rem; }
    .cal-chip.is-filled { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Cancelled events (#34) in the calendar views and the detail */
.cal-chip.is-cancelled, .tg-event.is-cancelled, .cal-list-item.is-cancelled, .week-agenda-event.is-cancelled { opacity: 0.7; }
.cal-chip.is-cancelled .cal-chip-title, .tg-event.is-cancelled .tg-event-title,
.cal-list-item.is-cancelled .cal-list-main > strong, .week-agenda-event.is-cancelled > strong,
.detail.is-cancelled .detail-title { text-decoration: line-through; text-decoration-thickness: 2px; }
.tg-event.is-cancelled { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgb(255 255 255 / 0.18) 6px 12px); }
.tg-event .cal-cancelled-badge { margin: 0 0 2px; align-self: flex-start; font-size: 0.6rem; }
.cal-cancel-note { display: block; font-size: var(--text-sm); color: var(--danger); }
.cal-cancelled-banner { display: flex; gap: var(--space-2); align-items: flex-start; margin-bottom: var(--space-4); }
.cal-cancelled-banner p { margin: var(--space-1) 0 0; }
.cal-cancel-form { min-width: 17rem; padding: var(--space-3); display: grid; gap: var(--space-2); }
.cal-cancel-form .hint { margin: 0; }
.cal-filter-cancelled { align-self: center; font-size: var(--text-sm); }
@media print { .cal-cancelled-badge { border: 1px solid #000; color: #000; background: none; } }