/* Документация: /docs/features/communications-report.md.
   Типы — DashboardHelper, серии — CommunicationIconsHelper, общие цвета — product UI. */
.communications-report { min-width: 0; }
.comm-filters { align-items: start; }
.comm-window-custom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.comm-call-filters { grid-column: 1 / -1; }
.comm-call-filter-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.comm-source-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-size: 12px; line-height: 1.6; color: var(--color-text-muted); }
.comm-source-note svg { flex-shrink: 0; margin-top: 2px; }
.comm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; padding: 18px 0; }
.comm-kpi { min-width: 0; border-right: 1px solid var(--color-border); padding: 0 22px; }
.comm-kpi:last-child { border: 0; }
.comm-kpi > span, .comm-kpi small { display: block; color: var(--color-text-muted); font-size: 12px; }
.comm-kpi strong { display: block; margin: 7px 0 3px; color: var(--color-text); font-size: 27px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.comm-kpi a { color: inherit; }
.comm-kpi a:hover { color: var(--color-primary); }
.comm-chart-card, .comm-team { padding: 20px; margin-bottom: 20px; min-width: 0; }
.comm-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.comm-section-head h2 { display: flex; gap: 8px; align-items: center; margin: 0; }
.comm-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.comm-controls .ui-tab, .comm-pause-controls .ui-tab { min-height: 32px; font-size: 12px; padding: 6px 10px; white-space: nowrap; }
.comm-controls > .ui-btn { font-size: 12px; min-height: 36px; }
.comm-caption { color: var(--color-text-muted); font-size: 12px; }
.comm-help { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 15px; height: 15px; padding: 0; border: 1px solid #cbd5e1; border-radius: 50%; color: var(--color-text-muted); background: transparent; font-size: 10px; line-height: 1; cursor: help; }
.comm-help:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.comm-series { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.comm-series-button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-text-secondary); font-size: 12px; }
.comm-series-button[aria-pressed="true"] { background: var(--color-surface-muted); }
.comm-series-check { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 1px solid #cbd5e1; border-radius: 3px; }
.comm-series-button[aria-pressed="true"] .comm-series-check { background: var(--series-color); border-color: var(--series-color); }
.comm-series-button[aria-pressed="true"] .comm-series-check::after { content: "✓"; color: #fff; font-size: 10px; line-height: 1; }
.comm-explanation { color: var(--color-text-muted); font-size: 12px; line-height: 1.6; margin: 8px 0 14px; }
.comm-chart-scroll { overflow-x: auto; }
.comm-chart-scroll svg { display: block; min-width: 650px; width: 100%; height: auto; }
.comm-chart-scroll svg text { font-family: inherit; font-size: 10px; fill: var(--color-text-muted); }
.comm-grid-line { stroke: var(--color-border); stroke-dasharray: 3 5; }
.comm-chart-hit { cursor: pointer; }
.comm-chart-hit:hover, .comm-chart-hit:focus-visible { fill: rgb(37 99 235 / 6%); outline: none; stroke: var(--color-primary); stroke-opacity: .3; }
.comm-future-fill { fill: #f1f5f9; }
.comm-chart-legend, .comm-team-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; color: var(--color-text-muted); font-size: 12px; }
.comm-chart-legend > span, .comm-team-footer > span { display: flex; align-items: center; gap: 6px; }
.comm-chart-legend i, .comm-team-footer i, .comm-tip-line i { display: inline-block; width: 10px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.comm-chart-footer { border-top: 1px solid var(--color-border); background: var(--color-surface-muted); color: var(--color-text-muted); font-size: 12px; line-height: 1.5; margin: 15px -20px -20px; padding: 12px 20px; border-radius: 0 0 14px 14px; }
.comm-pause-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px; background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text-secondary); font-size: 12px; }
.comm-pause-count { margin-left: auto; color: var(--color-text-muted); }
.comm-table-scroll { overflow-x: auto; }
.comm-table-scroll table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.comm-table-scroll th { color: var(--color-text-muted); font-size: 12px; font-weight: 500; padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--color-border); }
.comm-table-scroll td { font-size: 13px; padding: 12px 8px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.comm-table-scroll tfoot th, .comm-table-scroll tfoot td { background: var(--color-surface-muted); color: var(--color-text); font-weight: 600; border-top: 2px solid var(--color-border); }
.comm-table-scroll tbody tr:hover td { background: #f8fbff; }
.comm-table-scroll tr > :first-child { position: sticky; left: 0; z-index: 2; background: var(--color-surface); }
.comm-table-scroll tfoot tr > :first-child { background: var(--color-surface-muted); }
.comm-load-table { min-width: 930px; }
.comm-summary-table { min-width: 1170px; }
.comm-pauses-table { min-width: 950px; }
.comm-number { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.comm-heading { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.comm-heading > button:not(.comm-help) { padding: 0; background: none; border: 0; font: inherit; color: inherit; }
.comm-heading .comm-sort-active { color: var(--color-primary) !important; }
.comm-heading > button > span { font-size: 10px; }
.comm-heading-caption { display: block; margin-top: 3px; color: var(--color-text-muted); font-size: 11px; font-weight: 400; white-space: nowrap; }
.comm-events-heading .comm-heading { padding-left: 8px; }
.comm-person { display: block; max-width: 100%; padding: 0; background: none; border: 0; text-align: left; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comm-person:hover { color: var(--color-primary); }
.comm-total-caption { white-space: normal !important; color: var(--color-text-muted) !important; font-size: 12px !important; font-weight: 400 !important; }
.comm-time-scale { position: relative; height: 24px; margin-right: 6px; }
.comm-time-scale span { position: absolute; font-size: 10px; top: 5px; white-space: nowrap; transform: translateX(-50%); }
.comm-time-scale span:first-child { transform: none; }
.comm-time-scale span:last-child { transform: translateX(-100%); }
.comm-load-track { position: relative; height: 72px; min-width: 0; }
.comm-load-grid, .comm-load-bars { position: absolute; inset: 0; }
.comm-load-grid { pointer-events: none; }
.comm-load-grid i { position: absolute; top: 0; bottom: 0; border-left: 1px solid #edf2fa; }
.comm-load-bars { z-index: 2; pointer-events: none; }
.comm-load-bin { position: absolute; bottom: 0; height: 54px; display: flex; justify-content: center; align-items: flex-end; padding: 0 2px; border: 0; background: none; pointer-events: auto; }
.comm-load-bin:hover, .comm-load-bin:focus-visible { background: var(--color-primary-soft); outline: 1px solid #bfdbfe; outline-offset: -1px; }
.comm-load-stack { display: flex; flex-direction: column-reverse; width: 75%; max-width: 32px; min-width: 2px; overflow: hidden; border-radius: 3px 3px 0 0; pointer-events: none; }
.comm-load-stack i { display: block; min-height: 1px; width: 100%; }
.comm-unassigned { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 14px; padding: 11px 13px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-muted); color: var(--color-text-secondary); font-size: 12px; line-height: 1.6; }
.comm-unassigned[hidden] { display: none; }
.comm-unassigned > svg { flex-shrink: 0; margin-top: 2px; color: var(--color-text-muted); }
.comm-unassigned strong { color: var(--color-text); font-weight: 600; }
.comm-unassigned p { display: inline; margin-left: 8px; color: var(--color-text-muted); }
.comm-unassigned-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px; }
.comm-unassigned-links a { color: var(--color-primary); }
.comm-unassigned-links a:hover { text-decoration: underline; }
.comm-totals-note { margin: 8px 0 0; color: var(--color-text-muted); font-size: 12px; line-height: 1.5; }
.comm-pause, .comm-note-band, .comm-loading-gap { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; padding: 0 3px; font-size: 11px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 4px; }
.comm-pause { flex-direction: column; gap: 4px; background: #fff4d6; border: 1px solid #f6c76c; color: #92400e; z-index: 1; }
.comm-pause:hover { background: #ffedbd; }
.comm-note-band { align-items: flex-start; background: transparent; border: 1px dashed #93c5fd; color: #1d4ed8; z-index: 3; pointer-events: none; }
.comm-note-band button { pointer-events: auto; max-width: 100%; padding: 1px 5px; background: #eff6ff; border-radius: 3px; overflow: hidden; text-overflow: ellipsis; }
.comm-note-band button:hover { background: #dbeafe; }
.comm-loading-gap { background: #e2e8f0; color: var(--color-text-secondary); border: 1px solid #cbd5e1; z-index: 1; }
.comm-future { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: var(--color-text-muted); font-size: 10px; overflow: hidden; }
.comm-pause-number { color: var(--color-warning) !important; }
.comm-pause-chips { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.comm-pause-chips button { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; padding: 5px 7px; border: 1px solid #fde68a; border-radius: 5px; background: #fffbeb; color: #92400e; }
.comm-pause-chips .comm-more { background: transparent; color: var(--color-primary); border-color: transparent; }
.comm-team-footer { border-top: 1px solid var(--color-border); margin-top: 12px; padding-top: 12px; line-height: 1.6; }
.comm-legend-pause { background: #fff4d6; border: 1px solid #f6c76c; }
.comm-legend-note { background: var(--color-primary-soft); border: 1px dashed #93c5fd; }
.comm-legend-gap { background: #e2e8f0; border: 1px solid #cbd5e1; }
.comm-type-bar { display: flex; align-items: stretch; gap: 3px; height: 24px; min-width: min-content; }
.comm-type-segment { display: flex; align-items: center; justify-content: center; min-width: 16px; border-radius: 3px; padding: 0 3px; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 1px rgb(15 23 42 / 38%); }
.comm-type-segment[data-category="undefined"] { color: #0f172a; text-shadow: none; }
.comm-type-segment:is(:hover,:focus-visible) { box-shadow: inset 0 0 0 2px rgb(15 45 91 / 30%); color: #fff; outline: 0; }
.comm-type-segment[data-category="undefined"]:is(:hover,:focus-visible) { color: #0f172a; }
.comm-count { font-weight: 600; color: var(--color-text); }
.comm-count:hover { color: var(--color-primary); text-decoration: underline; }
.comm-held .comm-count { color: #15803d; }
.comm-count-messages { color: var(--comm-outgoing); }
.comm-count-tasks { color: var(--comm-task); }
.comm-muted { color: var(--color-text-muted); font-size: 12px; font-weight: 400; }
.comm-manual-notes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 10px 12px; background: var(--color-primary-soft); border: 1px solid #bfdbfe; border-radius: 8px; color: #1d4ed8; font-size: 12px; }
.comm-manual-notes:empty { display: none; }
.comm-manual-notes button { padding: 3px 7px; border-radius: 4px; background: #fff; border: 1px solid #bfdbfe; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.comm-popover-anchor { position: fixed; pointer-events: none; z-index: -1; }
.comm-popover { width: 340px; max-width: calc(100vw - 24px); z-index: 65; padding: 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; color: #334155; box-shadow: 0 8px 32px rgb(15 23 42 / 16%); font-family: inherit; font-size: 12px; line-height: 1.6; }
.comm-popover strong { color: #0f172a; }
.comm-popover p { margin: 6px 0; }
.comm-popover-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.comm-close { width: 26px; height: 26px; padding: 0; border: 0; background: transparent; border-radius: 5px; font-size: 20px; color: #64748b; line-height: 1; }
.comm-close:hover { background: #eff6ff; color: #2563eb; }
.comm-tip-line { display: flex; justify-content: space-between; gap: 15px; margin-top: 6px; }
.comm-tip-line > span { display: flex; align-items: center; gap: 6px; }
.comm-tip-line b { white-space: nowrap; color: #0f172a; }
.comm-tip-footnote { color: #64748b; font-size: 11px; border-top: 1px solid #e2e8f0; padding-top: 7px; }
.comm-inbound { color: #0f766e; }
.comm-outbound { color: #2563eb; }
.comm-note-menu { margin: 8px 0; width: 100%; font-size: 12px; }
.comm-pause-notes { display: grid; gap: 6px; margin: 8px 0; }
.comm-pause-note { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid #bfdbfe; border-radius: 6px; background: var(--color-primary-soft); color: #1d4ed8; }
.comm-pause-note span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.comm-pause-note button { color: var(--color-primary); font-size: 12px; }
.comm-pause-note button:hover { text-decoration: underline; }
.comm-pause-note .comm-delete { margin-right: 0; color: #b91c1c; }
.comm-chip-note { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; color: #1d4ed8; }
.comm-menu-explanation { border-top: 1px solid #e2e8f0; padding-top: 12px; margin-top: 8px; color: #64748b; }
.comm-menu-explanation b { color: #334155; }
.comm-menu-links { display: flex; flex-direction: column; gap: 3px; margin-top: 9px; max-height: 340px; overflow-y: auto; }
.comm-menu-links > a, .comm-menu-links > button { display: flex; gap: 12px; justify-content: space-between; padding: 9px 7px; border-radius: 5px; color: #334155; font-size: 12px; }
.comm-menu-links > a:hover, .comm-menu-links > button:hover { background: #eff6ff; color: #2563eb; }
.comm-note-editor { width: 380px; }
.comm-note-form label { display: block; margin: 12px 0 5px; font-size: 12px; color: #475569; }
.comm-note-form .ui-control { width: 100%; }
.comm-note-form textarea { padding: 8px 10px; resize: vertical; min-height: 68px; max-height: 150px; }
.comm-note-times { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.comm-note-form .comm-explanation { font-size: 11px; color: #64748b; }
.comm-note-presets { display: flex; gap: 6px; margin: 7px 0; }
.comm-note-presets button { padding: 3px 8px; border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8; border-radius: 5px; font-size: 11px; }
.comm-note-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid #e2e8f0; padding-top: 12px; }
.comm-note-actions .ui-btn { min-height: 36px; font-size: 12px; padding: 6px 10px; }
.comm-delete { margin-right: auto; color: #b91c1c; font-size: 12px; }
.comm-note-error { color: #b91c1c; font-size: 12px; }
@media (max-width: 1100px) {
  .comm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .comm-kpi:nth-child(2) { border: 0; }
  .comm-section-head { align-items: flex-start; }
}
@media (max-width: 767px) {
  .comm-call-filter-fields { grid-template-columns: minmax(0, 1fr); }
  .comm-chart-card, .comm-team { padding: 14px; }
  .comm-chart-footer { margin: 15px -14px -14px; padding: 10px 14px; }
  .comm-kpi { padding: 0 14px; }
  .comm-kpi strong { font-size: 23px; }
  .comm-pause-count { margin-left: 0; }
  .comm-controls { gap: 7px; }
}