/* RecurrencePicker - Outlook-style recurrence dialog (pattern + range groups). */
.recurrence-picker {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Subtle, compact group captions -- not heavy page-section headers. Each caption
   gets clear space ABOVE (separating it from the content above) and sits TIGHT to
   its own content below, so it clearly heads the group beneath it. */
.recurrence-picker .recurrence-section {
    gap: var(--space-1);
    padding-top: var(--space-5);
}
.recurrence-picker .form-section.recurrence-section .form-section-title {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--text-muted);
    /* The h3 inherits a global heading margin-bottom + underline border; strip both
       so the caption bonds tightly to the content it heads (clear space above only). */
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* "Recurrence pattern" group: frequency radio column | pattern options. */
.recurrence-pattern-body {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.recurrence-freq {
    flex-shrink: 0;
    padding-right: var(--space-4);
    border-right: var(--border-width-1) solid var(--border-subtle);
}

.recurrence-options {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
/* Keep the Monthly mode dropdown from spanning the whole column (matches the
   compact Weekly detail). */
.recurrence-options select { max-width: 60%; }

.recurrence-options-note {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* "Recur every [N] week(s)" -- inline label + small number field + unit. */
.recurrence-interval-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}
.recurrence-interval-row .form-field { width: auto; }
.recurrence-interval-row input[type="number"] { width: var(--space-15); }

/* Weekday chips: a tight wrapping row of standard checkboxes. A global rule
   forces bare <label>s to full-width space-between, which would stack each day
   on its own line -- pin the wrappers back to compact inline chips. */
.recurrence-picker .recurrence-days .checkbox-group-items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
}
.recurrence-picker .recurrence-days .checkbox-group-items .checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: var(--space-1);
}

.recurrence-monthly-weekday {
    display: flex;
    gap: var(--space-3);
}

/* "When"/"Range" group: start date + time on one row. */
.recurrence-when {
    display: flex;
    gap: var(--space-3);
}
.recurrence-when > * { flex: 1; min-width: 0; }

/* End conditions on ONE line, always visible. Wraps only as a last resort so it
   never runs off the modal edge; a one-time task greys the whole row. */
.recurrence-ends {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-4);
    margin-top: var(--space-2);
}
/* Connector words track the disabled state of their own field. */
.recurrence-ends-unit.is-muted { opacity: 0.5; }
.recurrence-ends-label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}
.recurrence-ends-opt {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.recurrence-ends-unit {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.recurrence-ends .form-field { width: auto; }
.recurrence-ends input[type="number"] { width: var(--space-15); }
/* Keep the end-date compact so the row stays on a single line. */
.recurrence-ends .date-picker,
.recurrence-ends input[type="date"] { width: var(--space-37); max-width: var(--space-37); }
/* Whole group greyed out when a one-time task makes "ends" irrelevant. */
.recurrence-ends-off { opacity: 0.55; }

/* Stack the pattern columns on narrow widths. */
@media (max-width: 640px) {
    .recurrence-pattern-body { flex-direction: column; }
    .recurrence-freq {
        border-right: none;
        border-bottom: var(--border-width-1) solid var(--border-subtle);
        padding-right: 0;
        padding-bottom: var(--space-3);
    }
    .recurrence-when { flex-direction: column; }
}