/* «Мониторинг» (ТЗ №96): живая картина смены. Подключается после ds.css; значения — только переменные из tokens.css (ни цветов, ни размеров шрифта числом). Разметка — webapp/public/js/pages/monitoring.js. */

.mon-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: var(--ds-gap); margin-bottom: var(--ds-gap); align-items: start; }
.mon-card .card-header { margin-bottom: var(--sp-2); }
.mon-table th.mon-row-label { text-align: left; font-weight: var(--fw-text); color: var(--ds-text); }
.mon-table td.num { white-space: nowrap; }
.mon-arrow, .mon-sub { display: block; font-size: var(--fs-12); }
.mon-table td, .mon-table th { vertical-align: top; }
.mon-cards .mon-table { table-layout: fixed; width: 100%; }
.mon-table th.mon-row-label { width: 34%; white-space: normal; text-transform: none; letter-spacing: 0; font-size: var(--fs-13); line-height: 1.3; }
.mon-cards .mon-table td.num { padding-left: var(--sp-1); padding-right: var(--sp-2); }
#mon-missed-table td:first-child { padding-left: var(--sp-3); }
.mon-arrow .tile-delta { font-size: var(--fs-12); }
.mon-phone, .mon-queue { white-space: nowrap; }
.mon-count { font-variant-numeric: tabular-nums; opacity: 0.75; margin-left: var(--sp-1); }
.mon-note, .mon-idle { margin: var(--sp-3) 0 0; }
.mon-idle-item { white-space: nowrap; }

/* Шапка: плашка «нет новых звонков», программы, панель фильтров. */
.mon-stale { margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--ds-r-ctl); background: var(--ds-warn-bg); color: var(--ds-warn-fg); border: 1px solid var(--ds-warn-border, var(--ds-warn-bg)); font-weight: var(--fw-strong); }
.mon-programs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.mon-filters { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0 0 var(--ds-gap); }
.mon-filters-toggle { display: none; align-self: flex-start; }
.mon-filters-panel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.mon-periods { flex: none; }
.mon-dates, .mon-more, .mon-excel { position: relative; }
.mon-dates > summary, .mon-more > summary, .mon-excel > summary { list-style: none; cursor: pointer; }
.mon-dates > summary::-webkit-details-marker, .mon-more > summary::-webkit-details-marker, .mon-excel > summary::-webkit-details-marker { display: none; }
.mon-dates > summary.is-set { background: var(--ds-btn-bg); color: var(--ds-btn-fg); }
.mon-pop { position: absolute; z-index: 30; top: calc(100% + var(--sp-1)); left: 0; min-width: 260px; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); background: var(--ds-surface); border: 1px solid var(--ds-border-strong); border-radius: var(--ds-r-card); box-shadow: var(--shadow); }
.mon-excel .mon-pop { left: auto; right: 0; min-width: 200px; }
.mon-more-pop { min-width: 320px; max-height: 70vh; overflow-y: auto; }
.mon-pop label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-13); color: var(--ds-text-2); }
.mon-pop fieldset { border: 0; padding: 0; margin: 0; }
.mon-pop legend { font-size: var(--fs-13); color: var(--ds-text-2); padding: 0; margin-bottom: var(--sp-1); }
.mon-ops-list { display: flex; flex-direction: column; gap: var(--sp-1); max-height: 180px; overflow-y: auto; }
.mon-check { flex-direction: row !important; align-items: center; gap: var(--sp-2) !important; color: var(--ds-text) !important; }
.mon-search { flex: 1 1 220px; max-width: 360px; }
.mon-search input { width: 100%; }
.mon-bar-actions { margin-left: auto; display: inline-flex; gap: var(--sp-2); }
.mon-chips { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.mon-chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); border-radius: var(--ds-r-badge); background: var(--ds-neutral-bg); color: var(--ds-neutral-fg); font-size: var(--fs-13); }
.mon-chip-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: var(--fs-15); line-height: 1; padding: 0 2px; }

/* «Ждёт»: цвет — по рабочим минутам (≤ 5 / ≤ 15 / ≤ 30 / > 30), подпись — минуты, цвет не единственный признак. */
.mon-wait { display: inline-block; padding: 2px var(--sp-2); border-radius: var(--ds-r-badge); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mon-wait-ok { background: var(--ds-ok-bg); color: var(--ds-ok-fg); }
.mon-wait-warn { background: var(--ds-info-bg); color: var(--ds-info-fg); }
.mon-wait-bad { background: var(--ds-warn-bg); color: var(--ds-warn-fg); }
.mon-wait-crit { background: var(--ds-bad-bg); color: var(--ds-bad-fg); }
#mon-missed-table tr[data-color="crit"] td:first-child { box-shadow: inset 3px 0 0 var(--ds-bad-fg); }

/* Операторы: сортировка по заголовку; точка статуса — цвет и значок (● ○ ■ ▲), рядом подпись. */
.mon-sort { border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; padding: 0; }
.mon-status { display: inline-flex; align-items: center; gap: var(--sp-2); }
.mon-status-text { color: var(--ds-text-2); font-size: var(--fs-13); }
.mon-dot { display: inline-block; width: 1.1em; text-align: center; font-size: var(--fs-13); line-height: 1; }
.mon-dot.is-green { color: var(--ds-ok-fg); }
.mon-dot.is-gray { color: var(--ds-text-2); }
.mon-dot.is-black { color: var(--ds-text); }
.mon-dot.is-red { color: var(--ds-bad-fg); }
.mon-legend { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-13); color: var(--ds-text-2); }
.mon-legend li { display: flex; align-items: baseline; gap: var(--sp-1); }

/* Телефон: панель фильтров сворачивается в «Фильтры (N)» и открывается снизу; период — одной прокручиваемой строкой. */
@media (max-width: 720px) {
  .mon-cards { grid-template-columns: minmax(0, 1fr); }
  .mon-filters-toggle { display: inline-flex; }
  .mon-filters-panel { display: none; }
  .mon-filters.is-open .mon-filters-panel { display: flex; flex-direction: column; align-items: stretch; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow-y: auto; padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + 56px); background: var(--ds-surface); border-top: 1px solid var(--ds-border-strong); border-radius: var(--ds-r-card) var(--ds-r-card) 0 0; box-shadow: var(--shadow); }
  .mon-periods { display: flex; overflow-x: auto; max-width: 100%; flex-wrap: nowrap; }
  .mon-periods .seg-btn { flex: 0 0 auto; white-space: nowrap; }
  .mon-pop, .mon-more-pop { position: static; min-width: 0; box-shadow: none; margin-top: var(--sp-2); }
  .mon-search { max-width: none; }
  .mon-programs { overflow-x: auto; flex-wrap: nowrap; }
  .mon-programs .seg-btn { flex: 0 0 auto; white-space: nowrap; }
  .mon-table td, .mon-table th { padding-left: var(--sp-2); padding-right: var(--sp-2); }
}

/* Большой экран: без меню, тёмная тема, крупно; фильтров и выгрузки нет. */
body.monitoring-screen .sidebar,
body.monitoring-screen .sidebar-overlay,
body.monitoring-screen .mobile-menu-btn,
body.monitoring-screen .bottom-nav,
body.monitoring-screen #saved-views { display: none; }
body.monitoring-screen .content { margin-left: 0; max-width: none; padding: var(--sp-5); }
body.monitoring-screen .mon-table td, body.monitoring-screen .mon-table th { font-size: var(--fs-20); padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
body.monitoring-screen .mon-status-text, body.monitoring-screen .mon-arrow, body.monitoring-screen .mon-arrow .tile-delta { font-size: var(--fs-16); }
body.monitoring-screen .mon-wait, body.monitoring-screen .mon-dot { font-size: var(--fs-20); }
body.monitoring-screen .page-context { font-size: var(--fs-24); }
body.monitoring-screen .card-title { font-size: var(--fs-24); }
body.monitoring-screen .mon-legend { font-size: var(--fs-16); }