/* Automation (Check -> «Автоматизация»): an optional module, see automation.js. */
.auto-page { display: flex; flex-direction: column; gap: 10px; max-width: 980px; }
/* a rule: folded to its head (switch, name, how many people, how many break it now); unfolded shows the settings */
.auto-rule { padding: 12px 16px; }
.auto-rule.is-on { border-left: 3px solid #2fa560; }
.auto-head { display: flex; align-items: center; gap: 12px; }
.auto-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; cursor: pointer; }
.auto-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; }
.auto-head h2 .ic { color: #e0a000; }
.auto-summary.bad { color: #c2410c; }
.auto-unfold { display: inline-flex; align-items: center; gap: 6px; }
.auto-caret { display: inline-block; transition: transform .15s; }
.auto-rule.open .auto-caret { transform: rotate(180deg); }
.auto-body { display: none; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.auto-rule.open .auto-body { display: flex; flex-direction: column; }
.auto-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 8px; background: #eef3ff; color: #2f4a99; }
.auto-checks { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.auto-when .field.off { opacity: .45; }
.auto-log-note { max-width: 560px; }
.auto-state { padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.auto-state.on { background: #e6f6ec; color: #1f7a45; }
.auto-desc { margin: 0; }
.auto-projects { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.auto-projects .badge { text-decoration: none; }
.auto-warn { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 8px; background: #fff7e6; color: #8a5a00; }
.auto-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.auto-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); cursor: pointer; font-size: 13px; user-select: none; }
.auto-chip input { margin: 0; }
.auto-chip.on { border-color: #9db5ff; background: #eef3ff; }
.auto-when { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.auto-when .field { margin: 0; }
.auto-when input[type=time] { width: 120px; }
.auto-num { width: 96px; }
.auto-people-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.auto-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.auto-person { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; background: var(--surface); }
.auto-person.off { opacity: .55; }
.auto-person-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.auto-person-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auto-person-state { font-size: 12px; font-weight: 600; white-space: nowrap; }
.auto-person-state.ok, .auto-res.ok { color: #1f7a45; }
.auto-person-state.bad, .auto-res.bad { color: #c2410c; }
.auto-person-state.off { color: var(--muted); }
.auto-log h2 { margin-top: 0; font-size: 17px; }
/* the on/off switch */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch-slider { position: absolute; inset: 0; border-radius: 99px; background: #c9cdd8; cursor: pointer; transition: background .15s; }
.switch-slider::before { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.switch input:checked + .switch-slider { background: #2fa560; }
.switch input:checked + .switch-slider::before { transform: translateX(18px); }
.switch input:focus-visible + .switch-slider { outline: 2px solid var(--primary); outline-offset: 2px; }
.auto-more { margin-top: 10px; }
.auto-pair { display: flex; gap: 6px; align-items: center; }
.auto-day { width: auto; }