/* Calendar event dialog: layout repair, Google Calendar-style repeat controls,
   the "Custom recurrence" and "This event / following / all" dialogs.
   Loaded after styles.css and parent-experience.css. */

/* ---- No sideways scrolling, docked (about 520px) or as a phone sheet ---- */
.manual-event-card { container: event-card / inline-size; }
.manual-event-card .block-form { min-width: 0; }
.manual-event-card .block-field,
.manual-event-card fieldset { min-width: 0; }
.manual-event-card .block-form :is(input, select, textarea) { min-width: 0; max-width: 100%; box-sizing: border-box; }
.manual-event-card .block-form :is(input:not([type="checkbox"]):not([type="radio"]), select) { min-height: 44px; }
.manual-event-card .block-form input[type="date"] { width: 100%; }
/* Long category names end with an ellipsis inside the field instead of widening it. */
.manual-event-card .block-form select { width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
/* Labels of different lengths still line the inputs up along the bottom. */
.manual-event-card .block-field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.manual-event-timing-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
/* The hour select also holds "Any time" / "Choose", so it gets the larger share. */
.manual-event-time-controls { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); }
.manual-event-time-picker select { padding-left: 10px; padding-right: 6px; }
.manual-event-card .block-form-actions :is(.btn-primary, .btn-secondary) { min-height: 44px; }
/* Docked beside the calendar: the title block shrinks instead of pushing Close onto its own line. */
.hh-docked-dialog .manual-event-card .modal-header { flex-wrap: nowrap; }
.manual-event-card .modal-header > div { flex: 1 1 0; }
/* Start above end whenever two full time pickers would not fit side by side. */
@container event-card (max-width: 600px) {
  .manual-event-timing-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@container event-card (max-width: 380px) {
  .manual-event-card .block-field-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Duplicate / Delete (edit mode) ---- */
.manual-event-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.manual-event-tools[hidden] { display: none; }
.manual-event-tool {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--bg-elev-2); border-radius: 10px; background: var(--bg-elev); color: var(--text);
  font-family: inherit; font-size: 13px; font-weight: 650; line-height: 1; cursor: pointer;
}
.manual-event-tool:hover, .manual-event-tool:focus-visible { border-color: var(--accent); outline: none; }
.manual-event-tool:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.manual-event-tool-danger { color: var(--danger); }
.manual-event-tool:disabled { opacity: .55; cursor: wait; }

/* ---- Repeat menu ---- */
.manual-event-repeat-row[hidden] { display: none; }
.manual-event-repeat-summary { margin: -6px 0 0; }
/* "Has an end date" sits right under Repeats; unchecked means it repeats indefinitely. */
.manual-event-repeat-end { display: grid; gap: 8px; margin-top: -6px; min-width: 0; }
.manual-event-repeat-end[hidden], .manual-event-repeat-end [hidden] { display: none; }
.manual-event-end-toggle {
  display: inline-flex; align-items: center; gap: 10px; justify-self: start; min-height: 44px; padding: 0 12px 0 2px;
  border-radius: 10px; color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer;
}
.manual-event-end-toggle input[type="checkbox"] { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.manual-event-end-toggle:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.manual-event-until-field { max-width: 260px; }
.manual-event-count-note { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0; color: var(--text-muted); font-size: 13px; }
.manual-event-link-button {
  min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--accent);
  font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.manual-event-link-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---- Custom recurrence and scope dialogs (above the docked event dialog) ---- */
.event-repeat-modal, .event-scope-modal { z-index: 300; }
.event-repeat-card, .event-scope-card { max-width: 420px; padding: 20px 22px 0; display: flex; flex-direction: column; }
.event-repeat-card [hidden], .event-scope-card [hidden] { display: none !important; }
.event-repeat-card .modal-header, .event-scope-card .modal-header { margin-bottom: 12px; padding-bottom: 10px; }
.event-repeat-card .modal-header h2, .event-scope-card .modal-header h2 { font-size: 19px; }
.event-repeat-form { gap: 16px; }
.event-repeat-every-controls { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
#event-repeat-interval { width: 78px; min-height: 44px; }
#event-repeat-unit { flex: 1 1 auto; min-width: 0; min-height: 44px; }
.event-repeat-days, .event-repeat-ends { min-width: 0; margin: 0; padding: 0; border: 0; }
.event-repeat-days > legend, .event-repeat-ends > legend { margin-bottom: 8px; }
.event-repeat-days-row { display: flex; flex-wrap: wrap; gap: 4px; }
.event-repeat-day {
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--bg-elev-2); border-radius: 50%;
  background: var(--bg-elev); color: var(--text); font-family: inherit; font-size: 14px; font-weight: 750; cursor: pointer;
}
.event-repeat-day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--hh-on-accent, #fff); }
.event-repeat-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#event-repeat-monthly { width: 100%; min-height: 44px; }
.event-repeat-end { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 48px; }
.event-repeat-end label { display: inline-flex; align-items: center; gap: 10px; min-width: 76px; min-height: 44px; color: var(--text); cursor: pointer; }
.event-repeat-end input[type="radio"], .event-scope-options input[type="radio"] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
#event-repeat-until { flex: 1 1 150px; min-width: 0; min-height: 44px; }
#event-repeat-count { width: 86px; min-height: 44px; }
.event-repeat-end > span { color: var(--text-muted); }
.event-scope-form { padding-bottom: 6px; }
.event-scope-options { display: grid; gap: 2px; min-width: 0; margin: 0; padding: 0; border: 0; }
.event-scope-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.event-scope-options label { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 8px; border-radius: 10px; color: var(--text); font-size: 16px; cursor: pointer; }
.event-scope-options label:hover { background: var(--bg-elev); }
.event-scope-note { margin: 10px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.event-repeat-card .block-form-actions, .event-scope-card .block-form-actions {
  justify-content: flex-end; margin-top: 8px; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); background: var(--bg);
}
.event-repeat-card .block-form-actions :is(.btn-primary, .btn-secondary),
.event-scope-card .block-form-actions :is(.btn-primary, .btn-secondary) { min-height: 44px; padding: 10px 18px; border-width: 1px; font-size: 15px; cursor: pointer; }
#event-scope-ok.is-danger { background: var(--danger); color: #fff; }
@media (max-width: 640px) {
  .event-repeat-modal, .event-scope-modal { align-items: flex-end; padding: 10px; }
  .event-repeat-card, .event-scope-card { max-height: calc(100dvh - 20px); padding: 18px 18px 0; border-radius: 18px 18px 10px 10px; overflow-y: auto; }
}

/* ---- Event pop-up: Duplicate beside Edit event ---- */
#hh-modal-activity .act-modal-header-actions { flex-wrap: wrap; }
.act-duplicate-event-btn { border-color: var(--bg-elev-2); background: transparent; }

/* ---- About how long? (Any time events only; js/parent.js syncManualEventDuration) ---- */
.manual-event-duration { min-width: 0; margin: 0; padding: 0; border: 0; }
.manual-event-duration[hidden] { display: none; }
.manual-event-duration > legend, .manual-event-links-field > legend { margin-bottom: 6px; }
.manual-event-duration-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.manual-event-duration-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.manual-event-duration-preset {
  min-height: 44px; min-width: 64px; padding: 0 12px; border: 1px solid var(--bg-elev-2); border-radius: 999px;
  background: var(--bg-elev); color: var(--text); font-family: inherit; font-size: 14px; font-weight: 650; cursor: pointer;
}
.manual-event-duration-preset[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--hh-on-accent, #fff); }
.manual-event-duration-preset:hover { border-color: var(--accent); }
.manual-event-duration-preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.manual-event-duration-custom { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 14px; font-weight: 650; }
.manual-event-card .block-form .manual-event-duration-custom input { width: 92px; }
.manual-event-duration > small, .manual-event-links-field > small { display: block; margin-top: 6px; color: var(--text-muted); font-size: 12px; line-height: 1.4; }

/* ---- Links (label + web address rows) ---- */
.manual-event-links-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.manual-event-links { display: grid; gap: 8px; margin-bottom: 8px; min-width: 0; }
.manual-event-links[hidden] { display: none; }
.manual-event-link-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 44px; gap: 8px; align-items: center; min-width: 0; }
.manual-event-card .block-form .manual-event-link-row input { width: 100%; }
.manual-event-link-remove {
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--bg-elev-2); border-radius: 10px;
  background: transparent; color: var(--text-muted); font-family: inherit; font-size: 15px; cursor: pointer;
}
.manual-event-link-remove:hover { border-color: var(--danger); color: var(--danger); }
.manual-event-link-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.manual-event-link-add {
  min-height: 44px; padding: 0 14px; border: 1px dashed var(--bg-elev-2); border-radius: 10px;
  background: transparent; color: var(--text); font-family: inherit; font-size: 14px; font-weight: 650; cursor: pointer;
}
.manual-event-link-add[hidden] { display: none; }
.manual-event-link-add:hover { border-color: var(--accent); }
.manual-event-link-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Narrow (docked or phone): the label and Remove share a line, the web address goes below. */
@container event-card (max-width: 520px) {
  .manual-event-link-row { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "label remove" "url url"; row-gap: 6px; }
  .manual-event-link-row .manual-event-link-label { grid-area: label; }
  .manual-event-link-row .manual-event-link-url { grid-area: url; }
  .manual-event-link-row .manual-event-link-remove { grid-area: remove; }
  .manual-event-link-row + .manual-event-link-row { padding-top: 8px; border-top: 1px solid var(--bg-elev-2); }
}