/* Local surface shades — derived from --pp-surface + --pp-text so they adapt to
   ANY theme, including ones (e.g. Nord dark) that leave --pp-surface-muted unset
   which previously fell back to a hardcoded LIGHT colour in dark mode. */
body[data-pp-action="calendar"], .ppcal-app, .ppcal-modal {
    --ppc-muted:  var(--pp-surface-muted,  color-mix(in srgb, var(--pp-surface, #fff) 90%, var(--pp-text, #000)));
    --ppc-soft:   var(--pp-surface-soft,   color-mix(in srgb, var(--pp-surface, #fff) 95%, var(--pp-text, #000)));
    --ppc-sunken: var(--pp-surface-sunken, color-mix(in srgb, var(--pp-surface, #fff) 92%, #000));
    --ppc-raised: var(--pp-surface-raised, var(--pp-surface, #fff));
}
/*!
 * pp-calendar.css — styles for the PPPHP Calendar app (pp-calendar.js).
 * Fully --pp-* theme-token driven (adapts to light / dark / custom themes).
 */

/* Page wrapper (generated/calendar) */
.pp-calapp { min-height: 70vh; }
.pp-calapp-sub { margin: -4px 0 14px; font-size: 13.5px; color: var(--pp-text-muted, #64748b); max-width: 70ch; line-height: 1.5; }
.pp-calapp-sub.is-center { text-align: center; margin-left: auto; margin-right: auto; }
.pp-calapp-foot { margin: 16px 0 0; text-align: center; font-size: 12.5px; color: var(--pp-text-muted, #94a3b8); }
/* Whole side panel hidden (Designer → Sidebar → Show side panel = off) */
.ppcal-app.ppcal-no-side { grid-template-columns: 1fr; }
.ppcal-app.ppcal-no-side .ppcal-side { display: none; }

/* App shell: sidebar + main */
.ppcal-app { display: grid; grid-template-columns: 232px 1fr; gap: 16px; color: var(--pp-text, #0f172a); align-items: start; }
@media (max-width: 820px) { .ppcal-app { grid-template-columns: 1fr; } .ppcal-side { order: 2; } }

/* Buttons */
/* Reset native <button> chrome so themed backgrounds (var(--pp-surface) etc.)
   actually paint — without this the UA button widget shows a fixed light fill
   and the calendar controls stay white in dark themes. */
.ppcal-btn, .ppcal-vw, .ppcal-mini-add, .ppcal-mini-nav, .ppcal-seg > button, .ppcal-rsvp { -webkit-appearance: none; appearance: none; }
.ppcal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-width: 34px; padding: 0 13px; border: 1px solid var(--pp-border, #e2e8f0); border-radius: 9px; background: var(--pp-surface, #fff); color: var(--pp-text, #0f172a); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.ppcal-btn:hover { border-color: var(--pp-primary, #2563eb); color: var(--pp-primary, #2563eb); }
.ppcal-ic { padding: 0; }
.ppcal-primary { background: var(--pp-primary, #2563eb); border-color: var(--pp-primary, #2563eb); color: var(--pp-primary-text, #fff); }
.ppcal-primary:hover { filter: brightness(1.06); color: var(--pp-primary-text, #fff); }
.ppcal-danger { color: var(--pp-danger, #dc2626); border-color: transparent; background: transparent; }
.ppcal-danger:hover { background: color-mix(in srgb, var(--pp-danger, #dc2626) 12%, transparent); color: var(--pp-danger, #dc2626); }

/* Sidebar */
.ppcal-side { display: flex; flex-direction: column; gap: 12px; }
.ppcal-side-new { width: 100%; }
.ppcal-side-h { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--pp-text-muted, #94a3b8); margin-top: 4px; }
.ppcal-mini-add { border: 0; background: transparent; color: var(--pp-text-muted, #94a3b8); cursor: pointer; border-radius: 6px; width: 22px; height: 22px; }
.ppcal-mini-add:hover { background: var(--ppc-muted); color: var(--pp-primary, #2563eb); }
.ppcal-callist { display: flex; flex-direction: column; gap: 2px; }
.ppcal-calrow { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.ppcal-calrow:hover { background: var(--ppc-muted); }
.ppcal-swatch { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; }
.ppcal-calname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppcal-shared-ic { color: var(--pp-text-muted, #94a3b8); font-size: 12px; }
.ppcal-side-tools { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--pp-border, #e2e8f0); padding-top: 10px; margin-top: 4px; }
.ppcal-tool { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--pp-text-muted, #64748b); text-decoration: none; background: transparent; border: 0; cursor: pointer; padding: 5px 6px; border-radius: 7px; text-align: left; }
.ppcal-tool:hover { background: var(--ppc-muted); color: var(--pp-primary, #2563eb); }

/* Main + toolbar */
.ppcal-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; position: relative; }
.ppcal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ppcal-nav { display: flex; align-items: center; gap: 8px; }
.ppcal-title { font-size: 1.15rem; font-weight: 800; margin-left: 6px; letter-spacing: -.01em; }
.ppcal-bar-r { display: flex; align-items: center; gap: 10px; }
.ppcal-views { display: inline-flex; gap: 3px; background: var(--ppc-muted); border: 1px solid var(--pp-border, #e2e8f0); border-radius: 10px; padding: 3px; }
.ppcal-vw { height: 28px; border: 0; background: transparent; padding: 0 12px; border-radius: 7px; color: var(--pp-text-muted, #64748b); }
.ppcal-vw:hover { color: var(--pp-primary, #2563eb); }
.ppcal-vw.is-active { background: var(--pp-surface, #fff); color: var(--pp-primary, #2563eb); box-shadow: 0 1px 3px rgba(15,23,42,.12); }

/* Month grid */
.ppcal-dow { display: grid; grid-template-columns: repeat(7, 1fr); }
.ppcal-dow-c { text-align: center; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--pp-text-muted, #94a3b8); padding: 6px 0; }
.ppcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(94px, 1fr); gap: 1px; background: var(--ppcal-line, var(--pp-border, #e2e8f0)); border: 1px solid var(--ppcal-line, var(--pp-border, #e2e8f0)); border-radius: 12px; overflow: hidden; }
.ppcal-cell { background: var(--pp-surface, #fff); padding: 5px 6px 7px; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.ppcal-cell.is-other { background: var(--ppc-sunken); }
.ppcal-cell.is-weekend { background: color-mix(in srgb, var(--pp-primary, #2563eb) 6%, var(--pp-surface, #fff)); }
.ppcal-cell.is-other.is-weekend { background: color-mix(in srgb, var(--pp-primary, #2563eb) 6%, var(--ppc-sunken)); }
.ppcal-cell.is-other .ppcal-daynum { color: var(--pp-text-muted, #94a3b8); }
.ppcal-cell.is-drop { outline: 2px dashed var(--pp-primary, #2563eb); outline-offset: -3px; background: var(--pp-primary-soft, rgba(37,99,235,.08)); }
.ppcal-cell-h { display: flex; justify-content: flex-end; }
.ppcal-daynum { width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--pp-text, #0f172a); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ppcal-daynum:hover { background: var(--pp-primary-soft, rgba(37,99,235,.12)); color: var(--pp-primary, #2563eb); }
.ppcal-cell.is-today .ppcal-daynum { background: var(--ppcal-today, var(--pp-primary, #2563eb)); color: var(--pp-primary-text, #fff); }
.ppcal-cell-evs { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }

/* Event chip (month + all-day lane) */
.ppcal-ev { --ev: var(--pp-primary, #2563eb); display: flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.35; cursor: pointer; white-space: nowrap; overflow: hidden; background: color-mix(in srgb, var(--ev) 16%, transparent); color: var(--ev); border-left: 3px solid var(--ev); }
.ppcal-ev:hover { background: color-mix(in srgb, var(--ev) 26%, transparent); }
.ppcal-ev.is-allday { background: var(--ev); color: #fff; border-left-color: transparent; }
.ppcal-ev.is-dragging { opacity: .45; }
.ppcal-ev-t { font-weight: 800; opacity: .85; font-size: 11px; }
.ppcal-ev-x { overflow: hidden; text-overflow: ellipsis; }
.ppcal-ev-ic { flex: 0 0 auto; font-size: 11px; }
.ppcal-more { font-size: 11px; font-weight: 700; color: var(--pp-text-muted, #64748b); padding: 1px 7px; }
@supports not (background: color-mix(in srgb, red 10%, white)) { .ppcal-ev { background: var(--ppc-muted); } }

/* Time grid (week / day) */
.ppcal-time { border: 1px solid var(--pp-border, #e2e8f0); border-radius: 12px; overflow: hidden; background: var(--pp-surface, #fff); }
.ppcal-th, .ppcal-allday { display: grid; grid-template-columns: 56px 1fr; }
.ppcal-th { border-bottom: 1px solid var(--pp-border, #e2e8f0); }
.ppcal-th > .ppcal-th-gutter:first-child, .ppcal-allday > .ppcal-th-gutter:first-child { border-right: 1px solid var(--pp-border, #e2e8f0); }
.ppcal-th { grid-template-columns: 56px repeat(var(--cols, 7), 1fr); }
.ppcal-th-c { text-align: center; padding: 7px 4px; border-left: 1px solid var(--pp-border, #e2e8f0); }
.ppcal-th-c.is-today { color: var(--pp-primary, #2563eb); }
.ppcal-th-dow { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--pp-text-muted, #94a3b8); }
.ppcal-th-num { font-size: 15px; font-weight: 800; }
.ppcal-th-gutter { font-size: 10px; color: var(--pp-text-muted, #94a3b8); display: flex; align-items: center; justify-content: center; }
.ppcal-allday { min-height: 30px; border-bottom: 1px solid var(--pp-border, #e2e8f0); }
.ppcal-allday-c { border-left: 1px solid var(--pp-border, #e2e8f0); padding: 3px; display: flex; flex-direction: column; gap: 2px; min-height: 26px; }
.ppcal-grid-scroll { max-height: 62vh; overflow-y: auto; }
.ppcal-timegrid { display: grid; grid-template-columns: 56px 1fr; }
.ppcal-hours { border-right: 1px solid var(--pp-border, #e2e8f0); }
.ppcal-hour { position: relative; }
.ppcal-hour span { position: absolute; top: -7px; right: 6px; font-size: 10px; color: var(--pp-text-muted, #94a3b8); }
.ppcal-cols { display: grid; }
.ppcal-col { position: relative; border-left: 1px solid var(--pp-border, #e2e8f0); }
.ppcal-slot { border-bottom: 1px solid var(--ppc-muted); }
.ppcal-tev { position: absolute; left: 3px; right: 3px; --ev: var(--pp-primary, #2563eb); background: color-mix(in srgb, var(--ev) 20%, var(--pp-surface, #fff)); border-left: 3px solid var(--ev); border-radius: 6px; padding: 2px 6px; font-size: 11.5px; overflow: hidden; cursor: pointer; color: var(--pp-text, #0f172a); }
.ppcal-tev.is-live { opacity: .8; box-shadow: 0 4px 12px rgba(15,23,42,.2); z-index: 5; }
.ppcal-tev-t { font-weight: 800; opacity: .8; }
.ppcal-tev-ic { font-size: 11px; }
.ppcal-tev-rz { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.ppcal-tev.is-live { cursor: grabbing; }

/* Clear, animated "Add" affordance (replaces the near-invisible +) */
.ppcal-add-btn { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border: 1px dashed var(--pp-primary-border, var(--pp-primary, #2563eb)); background: var(--pp-primary-soft, rgba(37,99,235,.12)); color: var(--pp-primary, #2563eb); border-radius: 999px; font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.ppcal-add-btn:hover { background: var(--pp-primary, #2563eb); color: var(--pp-primary-text, #fff); border-style: solid; box-shadow: 0 4px 12px color-mix(in srgb, var(--pp-primary, #2563eb) 40%, transparent); }
.ppcal-add-btn i { transition: transform .2s ease; }
.ppcal-add-btn:hover i { transform: rotate(90deg) scale(1.12); }
.ppcal-mini-add:hover { box-shadow: 0 0 0 1px var(--pp-primary-border, var(--pp-primary, #2563eb)) inset; }

/* Agenda */
.ppcal-agenda { display: flex; flex-direction: column; gap: 2px; }
.ppcal-ag-day { display: grid; grid-template-columns: 66px 1fr; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--pp-border, #e2e8f0); }
.ppcal-ag-date { text-align: center; }
.ppcal-ag-dow { display: block; font-size: 11px; text-transform: uppercase; color: var(--pp-text-muted, #94a3b8); }
.ppcal-ag-num { display: block; font-size: 22px; font-weight: 800; }
.ppcal-ag-mon { display: block; font-size: 11px; color: var(--pp-text-muted, #94a3b8); }
.ppcal-ag-evs { display: flex; flex-direction: column; gap: 5px; }
.ppcal-ag-ev { --ev: var(--pp-primary, #2563eb); display: flex; align-items: center; gap: 10px; padding: 7px 11px; border-radius: 8px; background: var(--ppc-muted); border-left: 3px solid var(--ev); cursor: pointer; }
.ppcal-ag-ev:hover { background: var(--ppc-soft); }
.ppcal-ag-time { font-weight: 800; font-size: 12px; color: var(--ev); min-width: 58px; }
.ppcal-ag-title { font-weight: 600; flex: 1; }
.ppcal-ag-loc { font-size: 12px; color: var(--pp-text-muted, #64748b); }
.ppcal-empty { padding: 40px; text-align: center; color: var(--pp-text-muted, #94a3b8); }

/* Editor modal */
.ppcal-modal { position: fixed; inset: 0; z-index: 4000; background: rgba(15,23,42,.42); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 14px; overflow-y: auto; }
.ppcal-modal-box { width: 100%; max-width: 560px; background: var(--ppc-raised); color: var(--pp-text, #0f172a); border: 1px solid var(--pp-border, #e2e8f0); border-radius: 14px; box-shadow: 0 24px 60px rgba(15,23,42,.35); overflow: hidden; }
.ppcal-modal-h { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--pp-border, #e2e8f0); font-size: 15px; }
.ppcal-x { border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--pp-text-muted, #94a3b8); }
.ppcal-modal-b { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; max-height: 66vh; overflow-y: auto; }
.ppcal-modal-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--pp-border, #e2e8f0); }
.ppcal-modal-f > div { display: flex; gap: 8px; }
.ppcal-frow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ppcal-flbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--pp-text-muted, #94a3b8); min-width: 78px; }
.ppcal-flbl-sm { font-size: 11px; font-weight: 700; color: var(--pp-text-muted, #94a3b8); }
.ppcal-hint { flex: 1; min-width: 0; font-size: 11.5px; color: var(--pp-text-muted, #94a3b8); line-height: 1.4; margin-top: -4px; }
.ppcal-in { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--pp-input-border, var(--pp-border, #e2e8f0)); border-radius: 8px; padding: 0 10px; background: var(--pp-input-bg, var(--pp-surface, #fff)); color: var(--pp-input-text, var(--pp-text, #0f172a)); font: inherit; font-size: 13px; }
textarea.ppcal-in { height: auto; padding: 7px 10px; resize: vertical; }
.ppcal-in:focus { outline: none; border-color: var(--pp-primary, #2563eb); box-shadow: 0 0 0 3px var(--pp-primary-soft, rgba(37,99,235,.18)); }
/* When-block: All-day switch + calendar + Starts/Ends, cleanly aligned */
.ppcal-when-block { border: 1px solid var(--pp-border, #e2e8f0); border-radius: 12px; padding: 12px; background: var(--ppc-soft); display: flex; flex-direction: column; gap: 12px; }
.ppcal-when-top { display: flex; align-items: center; gap: 12px; }
.ppcal-when-top .ppcal-cal { flex: 1; max-width: none; height: 36px; }
.ppcal-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 700; user-select: none; white-space: nowrap; position: relative; }
.ppcal-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ppcal-switch-ui { width: 38px; height: 22px; border-radius: 999px; background: var(--pp-border-strong, var(--pp-border, #cbd5e1)); position: relative; transition: background .15s; flex: 0 0 auto; }
.ppcal-switch-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.ppcal-switch input:checked + .ppcal-switch-ui { background: var(--pp-primary, #2563eb); }
.ppcal-switch input:checked + .ppcal-switch-ui::after { transform: translateX(16px); }
.ppcal-switch input:focus-visible + .ppcal-switch-ui { box-shadow: 0 0 0 3px var(--pp-primary-soft, rgba(37,99,235,.28)); }
.ppcal-switch-lbl { color: var(--pp-text, #0f172a); }
.ppcal-times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ppcal-when { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ppcal-when-l { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--pp-text-muted, #94a3b8); display: inline-flex; align-items: center; gap: 5px; }
.ppcal-when .ppcal-in, .ppcal-when .flatpickr-input { width: 100%; }
.ppcal-dt { cursor: pointer; }
@media (max-width: 520px) { .ppcal-times { grid-template-columns: 1fr; } }
.ppcal-dt[readonly] { cursor: default; }
.ppcal-dash { color: var(--pp-text-muted, #94a3b8); }
/* flatpickr popovers must clear the event modal (z 4000) */
.flatpickr-calendar { z-index: 6000 !important; }
.ppcal-num { max-width: 68px; flex: 0 0 auto; text-align: center; }
.ppcal-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.ppcal-cal { max-width: 200px; }
.ppcal-colors { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.ppcal-color { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.ppcal-color.is-sel { border-color: var(--pp-text, #0f172a); box-shadow: 0 0 0 2px var(--pp-surface, #fff) inset; }
.ppcal-color-none { background: var(--ppc-muted); color: var(--pp-text-muted, #94a3b8); font-size: 12px; line-height: 18px; }
.ppcal-sec { border-top: 1px solid var(--pp-border, #e2e8f0); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ppcal-sec-h { display: flex; align-items: center; justify-content: space-between; }
.ppcal-rems, .ppcal-shares { display: flex; flex-direction: column; gap: 6px; }
.ppcal-rem, .ppcal-share { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.ppcal-rem span { color: var(--pp-text-muted, #64748b); }
.ppcal-x-sm { border: 0; background: transparent; color: var(--pp-text-muted, #94a3b8); cursor: pointer; font-size: 18px; }
.ppcal-x-sm:hover { color: var(--pp-danger, #dc2626); }
.ppcal-rec-int { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--pp-text-muted, #64748b); }
.ppcal-byday { width: 30px; height: 30px; border: 1px solid var(--pp-border, #e2e8f0); background: var(--pp-surface, #fff); border-radius: 7px; cursor: pointer; font-weight: 700; font-size: 12px; color: var(--pp-text, #0f172a); }
.ppcal-byday.is-sel { background: var(--pp-primary, #2563eb); color: var(--pp-primary-text, #fff); border-color: var(--pp-primary, #2563eb); }
.ppcal-bydays { display: inline-flex; gap: 4px; }
.ppcal-hint { font-size: 11.5px; color: var(--pp-text-muted, #94a3b8); }
.ppcal-badge { font-size: 12px; font-weight: 700; text-transform: capitalize; padding: 2px 9px; border-radius: 999px; background: var(--ppc-muted); color: var(--pp-text-muted, #64748b); }
.ppcal-atts { display: flex; flex-wrap: wrap; gap: 6px; }
.ppcal-att { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--ppc-muted); }
.ppcal-rsvpbox > div { display: inline-flex; gap: 6px; }
.ppcal-rsvp.is-active { background: var(--pp-primary, #2563eb); color: var(--pp-primary-text, #fff); border-color: var(--pp-primary, #2563eb); }

/* Year view */
.ppcal-year { }
.ppcal-year-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1100px) { .ppcal-year-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .ppcal-year-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ppcal-year-grid { grid-template-columns: 1fr; } }
.ppcal-ym { border: 1px solid var(--pp-border, #e2e8f0); border-radius: 12px; padding: 10px; background: var(--pp-surface, #fff); }
.ppcal-ym-h { width: 100%; text-align: left; border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 800; color: var(--pp-text, #0f172a); cursor: pointer; padding: 2px 4px 8px; border-radius: 7px; }
.ppcal-ym-h:hover { color: var(--pp-primary, #2563eb); }
.ppcal-ym-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-bottom: 3px; }
.ppcal-ym-dow span { text-align: center; font-size: 9.5px; font-weight: 700; color: var(--pp-text-muted, #94a3b8); }
.ppcal-ym-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.ppcal-ym-d { position: relative; aspect-ratio: 1; border: 0; background: transparent; font: inherit; font-size: 11px; color: var(--pp-text, #0f172a); cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.ppcal-ym-d:hover { background: var(--ppc-muted); }
.ppcal-ym-d.is-out { color: transparent; pointer-events: none; }
.ppcal-ym-d.is-today { background: var(--pp-primary, #2563eb); color: var(--pp-primary-text, #fff); font-weight: 800; }
.ppcal-ym-d.has-ev::after { content: ""; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--pp-primary, #2563eb); }
.ppcal-ym-d.is-today.has-ev::after { background: var(--pp-primary-text, #fff); }

/* Segmented control (delivery "Notify via") */
.ppcal-seg { display: inline-flex; gap: 2px; background: var(--ppc-muted); border: 1px solid var(--pp-border, #e2e8f0); border-radius: 9px; padding: 2px; flex-wrap: wrap; }
.ppcal-seg-b { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border: 0; background: transparent; border-radius: 7px; font: inherit; font-size: 12px; font-weight: 700; color: var(--pp-text-muted, #64748b); cursor: pointer; }
.ppcal-seg-b:hover { color: var(--pp-primary, #2563eb); }
.ppcal-seg-b.is-sel { background: var(--pp-surface, #fff); color: var(--pp-primary, #2563eb); box-shadow: 0 1px 3px rgba(15,23,42,.14); }

/* Modal polish: accent header bar + mobile full-screen */
.ppcal-modal-box { animation: ppcal-pop .16s ease; }
@keyframes ppcal-pop { from { transform: translateY(10px) scale(.99); opacity: 0; } to { transform: none; opacity: 1; } }
.ppcal-modal-h { position: relative; }
.ppcal-modal-h::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--pp-primary, #2563eb); }
.ppcal-modal-h b { padding-left: 6px; font-weight: 800; }
@media (max-width: 620px) {
    .ppcal-modal { padding: 0; align-items: stretch; }
    .ppcal-modal-box { max-width: none; border-radius: 0; min-height: 100vh; display: flex; flex-direction: column; }
    .ppcal-modal-b { flex: 1; max-height: none; }
    .ppcal-times { flex-direction: column; align-items: stretch; }
    .ppcal-times .ppcal-in, .ppcal-tm { max-width: none; width: 100%; }
    .ppcal-dash { display: none; }
    .ppcal-flbl { min-width: 100%; }
}

/* Toolbar iCal group — labelled pill buttons, left of the view switcher */
.ppcal-ics { display: inline-flex; gap: 6px; margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--pp-border, #e2e8f0); }
.ppcal-ics-btn { padding: 0 12px; font-size: 12px; font-weight: 700; gap: 6px; }
.ppcal-ics-btn i { font-size: 13px; }
@media (max-width: 600px) { .ppcal-ics-btn span { display: none; } .ppcal-ics-btn { padding: 0; min-width: 34px; } }

/* Mini-month navigator */
.ppcal-mini { border: 1px solid var(--pp-border, #e2e8f0); border-radius: 12px; padding: 8px; background: var(--ppc-raised); }
.ppcal-mini-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.ppcal-mini-title { font-size: 12.5px; font-weight: 800; }
.ppcal-mini-nav { width: 22px; height: 22px; border: 0; background: transparent; color: var(--pp-text-muted, #94a3b8); border-radius: 6px; cursor: pointer; }
.ppcal-mini-nav:hover { background: var(--ppc-muted); color: var(--pp-primary, #2563eb); }
.ppcal-mini-dow { display: grid; grid-template-columns: repeat(7, 1fr); }
.ppcal-mini-dow span { text-align: center; font-size: 9.5px; font-weight: 700; color: var(--pp-text-muted, #94a3b8); }
.ppcal-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.ppcal-mini-d { position: relative; aspect-ratio: 1; border: 0; background: transparent; font: inherit; font-size: 11px; color: var(--pp-text, #0f172a); border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ppcal-mini-d.is-out { pointer-events: none; }
.ppcal-mini-d:hover { background: var(--ppc-muted); }
.ppcal-mini-d.is-sel { background: var(--pp-primary-soft, rgba(37,99,235,.2)); color: var(--pp-primary, #2563eb); font-weight: 800; }
.ppcal-mini-d.is-today { outline: 1px solid var(--pp-primary, #2563eb); outline-offset: -1px; }
.ppcal-mini-d.has-ev::after { content: ""; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 3px; height: 3px; border-radius: 50%; background: var(--pp-primary, #2563eb); }

/* Category (colour) filters */
.ppcal-cats { display: flex; flex-direction: column; gap: 1px; }
.ppcal-catrow { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.ppcal-catrow:hover { background: var(--ppc-muted); }
.ppcal-catdot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.ppcal-catname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppcal-catn { font-size: 11px; color: var(--pp-text-muted, #94a3b8); font-weight: 700; }

/* Attendee avatars */
.ppcal-avs { display: inline-flex; align-items: center; margin-left: 4px; }
.ppcal-av { width: 17px; height: 17px; border-radius: 50%; background: var(--pp-primary, #2563eb); color: var(--pp-primary-text, #fff); font-size: 8.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--pp-surface, #fff); margin-left: -6px; letter-spacing: -.02em; }
.ppcal-av:first-child { margin-left: 0; }
.ppcal-av-more { background: var(--pp-text-muted, #64748b); }
.ppcal-tev .ppcal-avs { position: absolute; right: 5px; bottom: 4px; }

/* Sidebar: upcoming events */
.ppcal-upcoming { display: flex; flex-direction: column; gap: 2px; }
.ppcal-up { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; width: 100%; color: var(--pp-text, #0f172a); }
.ppcal-up:hover { background: var(--ppc-muted); }
.ppcal-up-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ppcal-up-b { display: flex; flex-direction: column; min-width: 0; }
.ppcal-up-t { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppcal-up-d { font-size: 11px; color: var(--pp-text-muted, #94a3b8); }
.ppcal-up-empty { font-size: 12px; color: var(--pp-text-muted, #94a3b8); padding: 4px 6px; }

/* Symbol (emoji) picker */
.ppcal-icons { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ppcal-icbtn { width: 30px; height: 30px; border: 1px solid var(--pp-border, #e2e8f0); background: var(--pp-surface, #fff); border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; color: var(--pp-text-muted, #94a3b8); }
.ppcal-icbtn:hover { border-color: var(--pp-primary, #2563eb); }
.ppcal-icbtn.is-sel { border-color: var(--pp-primary, #2563eb); box-shadow: 0 0 0 2px var(--pp-primary-soft, rgba(37,99,235,.2)); }

/* Invite-people token input */
.ppcal-tokens { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 40px; padding: 5px 8px; border: 1px solid var(--pp-input-border, var(--pp-border, #e2e8f0)); border-radius: 9px; background: var(--pp-input-bg, var(--pp-surface, #fff)); }
.ppcal-tokens:focus-within { border-color: var(--pp-primary, #2563eb); box-shadow: 0 0 0 3px var(--pp-primary-soft, rgba(37,99,235,.18)); }
.ppcal-tok-list { display: contents; }
.ppcal-tok { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px 2px 9px; border-radius: 999px; background: var(--pp-primary-soft, rgba(37,99,235,.16)); color: var(--pp-primary, #2563eb); font-size: 12.5px; font-weight: 600; }
.ppcal-tok-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; width: 18px; height: 18px; border-radius: 50%; }
.ppcal-tok-x:hover { background: color-mix(in srgb, var(--pp-primary, #2563eb) 25%, transparent); }
.ppcal-tok-in { flex: 1; min-width: 90px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--pp-text, #0f172a); }
.ppcal-tok-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10; background: var(--ppc-raised); border: 1px solid var(--pp-border, #e2e8f0); border-radius: 10px; box-shadow: var(--pp-shadow-lg, 0 14px 34px rgba(15,23,42,.28)); overflow: hidden; max-height: 220px; overflow-y: auto; }
.ppcal-tok-menu[hidden] { display: none; }
.ppcal-tok-opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 12px; font: inherit; font-size: 13px; color: var(--pp-text, #0f172a); cursor: pointer; }
.ppcal-tok-opt:hover { background: var(--ppc-muted); }
.ppcal-tok-none { padding: 10px 12px; font-size: 12.5px; color: var(--pp-text-muted, #94a3b8); }

/* Event detail popover */
.ppcal-pop { position: fixed; z-index: 4500; width: 320px; max-width: calc(100vw - 20px); background: var(--ppc-raised); color: var(--pp-text, #0f172a); border: 1px solid var(--pp-border, #e2e8f0); border-radius: 14px; box-shadow: 0 20px 50px rgba(15,23,42,.4); overflow: hidden; animation: ppcal-pop .14s ease; }
.ppcal-pop-bar { height: 6px; }
.ppcal-pop-img { height: 120px; background-size: cover; background-position: center; }
.ppcal-pop-b { padding: 13px 15px; display: flex; flex-direction: column; gap: 8px; }
.ppcal-pop-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ppcal-pop-title { font-size: 15px; font-weight: 800; line-height: 1.25; }
.ppcal-pop-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pp-text, #0f172a); }
.ppcal-pop-row i { color: var(--pp-text-muted, #94a3b8); width: 16px; text-align: center; }
.ppcal-pop-desc { font-size: 12.5px; color: var(--pp-text-muted, #64748b); white-space: pre-wrap; max-height: 120px; overflow-y: auto; padding: 6px 0; border-top: 1px solid var(--pp-border, #e2e8f0); }
.ppcal-pop-atts { display: flex; flex-wrap: wrap; gap: 5px; }
.ppcal-pop-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.ppcal-pop-f-r { display: inline-flex; gap: 6px; }
.ppcal-btn.ppcal-sm { height: 30px; padding: 0 10px; font-size: 12px; }

/* flatpickr accent → theme primary (scoped to calendar pages) */
body[data-pp-action="calendar"] .flatpickr-day.selected, body[data-pp-action="calendar"] .flatpickr-day.selected:hover { background: var(--pp-primary, #2563eb); border-color: var(--pp-primary, #2563eb); color: var(--pp-primary-text, #fff); }
body[data-pp-action="calendar"] .flatpickr-day.today { border-color: var(--pp-primary, #2563eb); }
body[data-pp-action="calendar"] .flatpickr-day:hover { background: var(--ppc-muted); }
body[data-pp-action="calendar"] .flatpickr-day.selected.today { color: var(--pp-primary-text, #fff); }

/* Fast custom tooltip (replaces the slow native title tooltip) */
.ppcal-tip { position: fixed; z-index: 9000; background: var(--pp-text, #0f172a); color: var(--pp-surface, #fff); padding: 5px 9px; border-radius: 7px; font-size: 12px; font-weight: 600; line-height: 1.3; pointer-events: none; box-shadow: 0 6px 18px rgba(15,23,42,.35); opacity: 0; transform: translateY(3px); transition: opacity .1s ease, transform .1s ease; white-space: nowrap; max-width: 280px; }
.ppcal-tip.show { opacity: 1; transform: none; }

/* Toast */
.ppcal-toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 8px); background: var(--pp-text, #0f172a); color: var(--pp-surface, #fff); padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: 0 12px 30px rgba(15,23,42,.28); opacity: 0; transition: .22s; z-index: 5000; }
.ppcal-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ppcal-toast.is-bad { background: var(--pp-danger, #dc2626); color: #fff; }

/* ════════════════════════════════════════════════════════════════════
   Event editor modal — modern refresh (2026-07). Appended last so these
   refinements win; a fresh mobile @media at the very end keeps the
   full-screen sheet on phones. All theme-token driven (light + dark).
   ════════════════════════════════════════════════════════════════════ */
.ppcal-modal { background: color-mix(in srgb, var(--pp-text, #0f172a) 45%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 4.5vh 16px; }
.ppcal-modal-box { max-width: 600px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--pp-border, #e2e8f0) 65%, transparent); box-shadow: 0 32px 80px -14px rgba(15, 23, 42, .5), 0 0 0 1px rgba(15, 23, 42, .04); animation: ppcal-pop .18s cubic-bezier(.32, 1.2, .5, 1); }

/* Header — drop the dated left bar; bigger, tighter title; round close btn */
.ppcal-modal-h { padding: 17px 22px 15px; border-bottom: 1px solid color-mix(in srgb, var(--pp-border, #e2e8f0) 60%, transparent); }
.ppcal-modal-h::before { display: none; }
.ppcal-modal-h b { padding-left: 0; font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
.ppcal-x { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 21px; transition: background .12s, color .12s; }
.ppcal-x:hover { background: var(--ppc-muted); color: var(--pp-text, #0f172a); }

.ppcal-modal-b { padding: 18px 22px; gap: 16px; max-height: 68vh; scrollbar-width: thin; }
.ppcal-modal-b::-webkit-scrollbar { width: 10px; }
.ppcal-modal-b::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--pp-text, #0f172a) 16%, transparent); border-radius: 20px; border: 3px solid transparent; background-clip: content-box; }
.ppcal-modal-f { padding: 14px 22px; border-top: 1px solid color-mix(in srgb, var(--pp-border, #e2e8f0) 60%, transparent); background: color-mix(in srgb, var(--pp-surface, #fff) 60%, var(--ppc-soft)); }

/* Rows + labels — label top-aligned to the first line of its control */
.ppcal-frow { align-items: flex-start; gap: 14px; }
.ppcal-frow > .ppcal-flbl { min-width: 84px; padding-top: 12px; }
.ppcal-flbl { font-size: 10.5px; letter-spacing: .06em; color: var(--pp-text-muted, #94a3b8); }

/* Inputs — taller, softer, refined focus + hover */
.ppcal-in { height: 40px; border-radius: 10px; padding: 0 12px; font-size: 13.5px; border: 1px solid color-mix(in srgb, var(--pp-border, #e2e8f0) 88%, transparent); transition: border-color .14s, box-shadow .14s, background .14s; }
.ppcal-in::placeholder { color: var(--pp-text-muted, #94a3b8); opacity: .75; }
.ppcal-in:hover:not(:focus):not([readonly]):not([disabled]) { border-color: color-mix(in srgb, var(--pp-primary, #2563eb) 40%, var(--pp-border, #cbd5e1)); }
.ppcal-in:focus { box-shadow: 0 0 0 3.5px var(--pp-primary-soft, rgba(37, 99, 235, .16)); }
textarea.ppcal-in { min-height: 62px; padding: 9px 12px; line-height: 1.5; }
select.ppcal-in { cursor: pointer; }

/* When-block — clean neutral card (no blue tint), just a light bordered group */
.ppcal-when-block { border-radius: 14px; padding: 14px; gap: 14px; border: 1px solid color-mix(in srgb, var(--pp-border, #e2e8f0) 80%, transparent); background: color-mix(in srgb, var(--pp-text, #0f172a) 2.5%, var(--pp-surface, #fff)); }
.ppcal-when-l { font-size: 10px; }
.ppcal-when-l i { color: var(--pp-primary, #2563eb); opacity: .9; }

/* Symbols — one compact scrollable line (never wraps to a second row) */
.ppcal-icons { flex-wrap: nowrap; gap: 4px; min-width: 0; overflow-x: auto; overflow-y: hidden; padding-bottom: 3px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--pp-text, #0f172a) 22%, transparent) transparent; }
.ppcal-icons::-webkit-scrollbar { height: 6px; }
.ppcal-icons::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--pp-text, #0f172a) 20%, transparent); border-radius: 20px; }
.ppcal-icbtn { flex: 0 0 auto; width: 27px; height: 27px; border-radius: 8px; font-size: 14px; }

/* Colours — bigger swatches, hover lift, donut selected state */
.ppcal-colors { gap: 8px; }
.ppcal-color { width: 26px; height: 26px; border: 0; box-shadow: 0 1px 2px rgba(15, 23, 42, .18); transition: transform .12s, box-shadow .12s; }
.ppcal-color:hover { transform: translateY(-2px) scale(1.08); }
.ppcal-color.is-sel { box-shadow: inset 0 0 0 2.5px var(--pp-surface, #fff), 0 0 0 2px var(--pp-text, #0f172a); }
.ppcal-color-none { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pp-border, #cbd5e1) 90%, var(--pp-text-muted, #94a3b8)); }
.ppcal-color-none.is-sel { box-shadow: inset 0 0 0 2px var(--pp-surface, #fff), 0 0 0 2px var(--pp-text-muted, #94a3b8); }

/* Symbols — larger tiles, hover lift, filled selected */
.ppcal-icons { gap: 6px; }
.ppcal-icbtn { width: 38px; height: 38px; border-radius: 10px; font-size: 18px; border: 1px solid color-mix(in srgb, var(--pp-border, #e2e8f0) 80%, transparent); transition: transform .12s, border-color .12s, box-shadow .12s, background .12s; }
.ppcal-icbtn:hover { transform: translateY(-2px); border-color: var(--pp-primary, #2563eb); box-shadow: 0 4px 10px rgba(15, 23, 42, .1); }
.ppcal-icbtn.is-sel { border-color: var(--pp-primary, #2563eb); background: var(--pp-primary-soft, rgba(37, 99, 235, .12)); box-shadow: 0 0 0 3px var(--pp-primary-soft, rgba(37, 99, 235, .18)); }

/* Sections — softer dividers */
.ppcal-sec { border-top: 1px solid color-mix(in srgb, var(--pp-border, #e2e8f0) 50%, transparent); padding-top: 15px; margin-top: 3px; gap: 10px; }

/* Footer buttons — larger, primary lifts on hover */
.ppcal-modal-f .ppcal-btn { height: 40px; border-radius: 10px; padding: 0 18px; font-size: 13.5px; }
.ppcal-modal-f .ppcal-primary { box-shadow: 0 5px 16px -3px color-mix(in srgb, var(--pp-primary, #2563eb) 55%, transparent); transition: transform .12s, box-shadow .12s, filter .12s; }
.ppcal-modal-f .ppcal-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -4px color-mix(in srgb, var(--pp-primary, #2563eb) 60%, transparent); }

/* Responsive full-screen sheet (LAST — wins over the refinements above) */
@media (max-width: 560px) {
    .ppcal-modal { padding: 0; align-items: stretch; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .ppcal-modal-box { max-width: none; border-radius: 0; min-height: 100vh; border: 0; display: flex; flex-direction: column; }
    .ppcal-modal-b { flex: 1; max-height: none; }
    .ppcal-times { grid-template-columns: 1fr; }
    .ppcal-frow { flex-direction: column; align-items: stretch; gap: 6px; }
    .ppcal-frow > .ppcal-flbl { min-width: 0; padding-top: 0; }
}
