/* alerts.css — alert rules, latest alerts list, Discord webhooks.
   Built on theme.css tokens; no colours of its own. */

.alerts-layout { align-items: start; }

.rules { list-style: none; margin: 0; padding: 0; }
.rule { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: .75rem; }
.rule:last-child { border-bottom: 0; }
.rule--off .rule__title, .rule--off .rule__scope { opacity: .55; }
.rule__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.rule__head form { margin: 0; flex: none; }
.rule__title { display: block; font-weight: 600; }
.rule__scope { display: block; margin-top: .1rem; }
.rule__form { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem; margin: 0; }
.rule__form .field__select { min-width: 150px; }
.rule__form .field__input { height: 32px; font-size: .86rem; }
@media (max-width: 640px) { .rule__form .field__input { height: 40px; font-size: 16px; } }
.rule__form .checkbox { align-items: center; }
.rule__form .checkbox input { margin-top: 0; }
.rule__threshold { gap: .4rem; }
.rule__threshold .field__label { font-weight: 500; }
.rule__threshold .field__input { width: 76px; }
.rule__channels { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.rule__channels legend { padding: 0; margin-bottom: .35rem; }

.alert-list { list-style: none; margin: 0; padding: 0; }
.alert-list__item { display: flex; flex-direction: column; gap: .3rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--border); }
.alert-list__item:last-child { border-bottom: 0; }
.alert-list__title { font-size: .9rem; font-weight: 500; overflow-wrap: anywhere; }
.alert-list__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.webhooks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.webhooks__item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-subtle); }
.webhooks__item form { margin: 0; }
.webhooks__info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.webhooks__info .mono { overflow-wrap: anywhere; }

@media (max-width: 620px) {
    .rule { padding: .9rem 1rem; }
    .rule__form .field__select { min-width: 0; flex: 1 1 140px; }
    .alert-list__item { padding: .7rem 1rem; }
}