/* Модуль «Мониторинг» (admin/js/modules/monitor.js подключает этот файл сам). Только токены темы из mockup/css/core.css и admin.css. */
.mo-gap { margin-top: 16px }
.mo-ok { color: var(--ok) }
.mo-link { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-align: left }
.mo-link:hover { text-decoration: underline }
.mo-spark { color: var(--accent) }
.mo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
@media (min-width: 900px) { .mo-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) } }

/* Полоса загрузки: занято / лимит */
.mo-load { display: flex; gap: 8px; align-items: center; min-width: 0 }
.mo-bar { background: var(--surface-2); border-radius: 4px; height: 8px; min-width: 60px; flex: 1 }
.mo-bar i { display: block; height: 100%; border-radius: 4px }
.mo-load .num { white-space: nowrap }
table.mo-live td:nth-child(3), table.mo-live td:nth-child(4) { min-width: 150px }
@media (max-width: 640px) { table.a-cards .mo-load { width: 60%; justify-content: flex-end } }

/* Светофор по направлениям */
.mo-lights { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) }
.mo-light { display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--fg); min-height: 52px; cursor: pointer; font: inherit }
.mo-light:hover { background: var(--surface-2) }
.mo-lamp { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft) }
.mo-light.mo-warn .mo-lamp { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft) }
.mo-light.mo-bad { border-color: var(--bad) }
.mo-light.mo-bad .mo-lamp { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); animation: blink 1.2s ease-in-out infinite }
.mo-ln { flex: 1; min-width: 0; display: grid }
.mo-ln small { color: var(--muted); font-size: 12px }           /* wraps: the numbers must not be cut with "..." */
@media (prefers-reduced-motion: reduce) { .mo-light.mo-bad .mo-lamp { animation: none } }

/* Карточки аварий и инцидентов */
.mo-als { display: grid; gap: 14px; grid-template-columns: 1fr }
@media (min-width: 1100px) { .mo-als { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.mo-al { border-left: 3px solid var(--line) }
.mo-al.mo-bad { border-left-color: var(--bad) }
.mo-al.mo-warn { border-left-color: var(--warn) }
.mo-al.mo-done { opacity: .8 }
.mo-what { margin: 0; font-weight: 600 }
.mo-chips { gap: 6px; flex-wrap: wrap }
.mo-btns { gap: 6px; flex-wrap: wrap }
.mo-hit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.mo-hit .chip { white-space: normal; text-align: left; border: 1px solid var(--line) }
.mo-lcr { display: grid; gap: 2px }
.mo-ptw { margin: 0 }
.mo-pt { border-collapse: collapse; font-family: var(--font-num); font-size: 12.5px; width: 100% }
.mo-pt th, .mo-pt td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap }
.mo-pt th:first-child { text-align: left; color: var(--muted); font-weight: 500 }
.mo-pt thead th { color: var(--muted); font-weight: 500 }
@media (max-width: 640px) { .mo-pt th, .mo-pt td { padding: 4px 4px; font-size: 12px } }
.mo-pt td.bad { color: var(--bad); font-weight: 700; background: var(--bad-soft) }

/* Правила с порогами по профилям */
.mo-rules { display: grid; gap: 10px; grid-template-columns: 1fr }
@media (min-width: 900px) { .mo-rules { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.mo-rule { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; background: var(--surface) }
.mo-rule.off { opacity: .6 }
.mo-thr { display: flex; gap: 8px; flex-wrap: wrap }
.mo-thr label { display: grid; gap: 2px }
.mo-where { display: flex; gap: 6px 14px; flex-wrap: wrap }
.mo-where label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer }
.mo-irsf { width: min(320px, 100%) }
@media (max-width: 640px) { .mo-irsf { width: 100% } }
.mo-q { white-space: nowrap }
.mo-upch { display: grid; gap: 2px; min-width: 130px }
@media (max-width: 640px) { .mo-upch { width: 60%; min-width: 0; justify-items: end } .mo-upch .mo-load { width: 100% } }

/* Телефон: ссылки-кнопки монитора (счётчики, имена реселлеров) нажимаются пальцем - 40 px (e2e T1) */
@media (max-width: 899px) { .mo-link { min-height: 40px; display: inline-flex; align-items: center } }