/* Модуль «Звонки»: вкладки, фильтры, CDR (таблица на широком / список на узком), SIP-лесенка, отчёты */
.st-tabs { margin-bottom: 14px }
.st-tabs button { padding-inline: 6px }
.st-filters { display: grid; gap: 8px; grid-template-columns: 1fr }
.st-filters .inp { font-size: 15px; padding: 9px 10px }
.st-fbox { border-top: 1px dashed var(--line); padding-top: 12px }
.st-chips { gap: 6px }
.st-chips .chip { border: 1px solid var(--line); font-size: 13px; padding: 6px 11px; cursor: pointer }
.st-chips .chip.acc { border-color: var(--accent) }
.inp.st-n { width: 86px; font-size: 15px; padding: 7px 9px; font-family: var(--font-num) }
.st-sortsel { width: auto; font-size: 14px; padding: 7px 9px }
.st-exp { display: grid; gap: 8px; grid-template-columns: 1fr }
.st-table { display: none }
.st-sort { cursor: pointer; user-select: none }
.st-sort[aria-sort="ascending"], .st-sort[aria-sort="descending"] { color: var(--accent) }
.st-ladder { display: grid; gap: 4px; font-size: 13px }
.st-ladder > div { display: grid; grid-template-columns: 64px 62px minmax(0, 1fr); gap: 2px 8px; align-items: baseline; padding: 5px 8px; border-radius: 7px; background: var(--surface-2) }
.st-ladder > div.in { background: var(--accent-soft) }
.st-ladder .t { color: var(--muted); font-size: 12px }
.st-ladder .arr { font-size: 11.5px; color: var(--muted) }
.st-ladder .hint { grid-column: 3; font-size: 12px }
.st-ladder b { overflow-wrap: anywhere }
/* Отчёты */
.rp-codes { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start }
.rp-donut { width: 170px; height: 170px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; position: relative }
.rp-donut::before { content: ""; position: absolute; inset: 28px; border-radius: 50%; background: var(--surface) }
.rp-donut span { position: relative; display: grid; text-align: center; font-size: 20px }
.rp-donut small { font-size: 12px; color: var(--muted) }
.rp-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: 0 }
.bars.rp-stack div { display: flex; flex-direction: column; background: none; overflow: hidden }
.bars.rp-stack div span { display: block; min-height: 0 }
.bars.rp-load { position: relative }
.bars.rp-load::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--lim); border-top: 2px dashed var(--bad); opacity: .7; pointer-events: none }
.rp-heat { display: grid; grid-template-columns: 22px repeat(24, minmax(8px, 1fr)); gap: 2px; min-width: 260px; font-size: 10.5px; color: var(--muted) }
.rp-heat i { aspect-ratio: 1; border-radius: 3px; background: color-mix(in srgb, var(--accent) var(--a), var(--surface-2)) }
.rp-heat .rp-hh { text-align: left; font-family: var(--font-num) }
.rp-heat .rp-hd { align-self: center }
.rp-scale { display: inline-block; width: 90px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, var(--surface-2)), var(--accent)) }
@media (min-width: 640px) {
  .st-filters { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .kpis.st-k6 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .st-exp { grid-template-columns: auto auto 1fr; justify-items: start }
  .rp-codes { grid-template-columns: 190px minmax(0, 1fr) }
  .st-reps { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (min-width: 900px) {
  .st-table { display: block }
  .st-list { display: none }
  .st-reps { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
@media (min-width: 1100px) { .kpis.st-k6 { grid-template-columns: repeat(6, minmax(0, 1fr)) } }
.st-cols > summary { list-style: none; display: inline-flex; cursor: pointer }
.st-cols > summary::-webkit-details-marker { display: none }
.st-chips label.chip { cursor: pointer; border: 1px solid var(--line); padding: 5px 10px; font-size: 13px }
.st-chips label.chip.acc { border-color: var(--accent) }
.st-saved { padding: 0 2px 0 4px; gap: 0 }
.st-saved .btn { min-height: 32px; padding: 2px 8px; font-size: 13px }
tr.rp-bad td { background: var(--warn-soft) }
@media (max-width: 899px) { .st-saved .btn { min-height: 40px } }