/* Shared schedule picker — see js/shared/components/schedule-picker.js
 *
 * A row of dropdowns that composes a recurring schedule, plus a hint line
 * that reads the result back in the user's language. Always reference CSS
 * variables from global.css — no hardcoded hex.
 */

.shared-sched {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.shared-sched-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.shared-sched-select,
.shared-sched-input {
    /* The app theme carries a bare `select { width: 100% }`, which makes
       every control claim the whole row and pushes the next one onto its
       own line. This row is meant to read as one sentence, so each control
       sizes to its own content. */
    width: auto;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: var(--color-text-primary);
    background: var(--color-bg-white);
    box-sizing: border-box;
}

.shared-sched-select:focus,
.shared-sched-input:focus {
    outline: none;
    border-color: var(--color-accent-purple);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.shared-sched-freq { min-width: 130px; }
.shared-sched-weekday,
.shared-sched-month { min-width: 120px; }
.shared-sched-quarter-month { min-width: 200px; }
.shared-sched-day { min-width: 90px; }
.shared-sched-hours { width: 72px; }
.shared-sched-time { min-width: 110px; }

.shared-sched-text {
    font-size: 13px;
    color: var(--color-text-muted);
}

.shared-sched-hint {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* Day 29–31 does not exist in every month — cron skips those months
   rather than moving the run, so the warning has to stand out. */
.shared-sched-hint-warn {
    color: var(--color-warning);
}

@media (max-width: 640px) {
    .shared-sched-row > .shared-sched-select,
    .shared-sched-row > .shared-sched-input { flex: 1 1 auto; width: 100%; }
}