/* Отчёт собственника: компактная шапка (период, посты-фильтр, три плашки-фильтра)
   и таблица визитов сразу под ней. Палитра и контролы общие с оперативным разделом. */
.reports-view { flex: 1; min-height: 0; overflow: auto; background: var(--bg); }
.reports-content { width: 100%; margin: 0; padding: 12px 24px 20px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Шапка: период + посты в одну строку */
.report-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.report-period { display: flex; flex: none; gap: 2px; padding: 2px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel-2); }
.report-period button { min-height: 34px; padding: 6px 13px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); }
.report-period button.on { color: var(--text); background: var(--panel-3); }
.report-post-chips { display: flex; flex: 1; min-width: 0; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.report-chip { display: inline-flex; flex: none; align-items: center; gap: 7px; min-height: 34px; padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.report-chip.on { color: var(--text); border-color: var(--blue); background: var(--panel-3); }
.report-chip b { padding: 1px 7px; border-radius: 9px; background: rgba(244, 182, 75, .16); color: var(--amber); font-size: 11px; font-weight: 650; }
.report-chip b.bad { background: rgba(255, 97, 115, .16); color: var(--red); }
.report-chip-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.report-notice { margin: 0 0 8px; padding: 7px 12px; border: 1px solid rgba(244, 182, 75, .3); border-radius: 8px; background: rgba(244, 182, 75, .07); color: var(--amber); font-size: 12px; }
.report-error { padding: 10px 14px; margin-bottom: 8px; border: 1px solid rgba(255, 97, 115, .3); border-radius: 8px; color: var(--red); background: var(--panel); display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Три плашки; каждая включает свой фильтр таблицы */
.report-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.report-metric { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 8px; min-height: 54px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); text-align: left; }
button.report-metric:hover { border-color: var(--line-2); background: var(--panel-2); }
.report-metric.on { border-color: var(--blue); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--blue); }
.report-metric-value { font-size: 24px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.report-metric-value.unknown { color: var(--muted); }
.report-metric.warn .report-metric-value { color: var(--amber); }
.report-metric.bad .report-metric-value { color: var(--red); }
.report-metric-label { font-size: 13px; }
.report-metric-note { flex-basis: 100%; color: var(--muted); font-size: 11px; line-height: 1.3; }

/* Таблица визитов */
.report-cases { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.report-table-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.report-open-post { color: var(--text); text-decoration: none; font-size: 12px; white-space: nowrap; }
.report-open-post:hover { color: var(--blue); }
.report-table-wrap { position: relative; overflow-x: auto; }
.report-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.report-table th { padding: 7px 8px; text-align: left; color: var(--muted); font-size: 11px; font-weight: 500; border-bottom: 1px solid var(--line); white-space: nowrap; }
.report-table td { height: 92px; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; text-align: left; white-space: nowrap; }
.report-table tr:last-child td { border-bottom: 0; }
.report-row { cursor: pointer; }
.report-row:hover td { background: var(--panel-2); }
.col-thumb { width: 140px; padding-right: 0; }
.report-thumb { display: block; width: 128px; height: 80px; border-radius: 6px; background: var(--panel-3); overflow: hidden; }
.report-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.col-time { white-space: nowrap; }
.report-table .col-num { white-space: nowrap; text-align: right; }
.col-num.unknown { color: var(--faint); }
.col-car { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-pay { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-sum { display: block; font-size: 16px; letter-spacing: .01em; }
.pay-detail { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.col-pay .muted { color: var(--faint); }
.car-plate { display: block; font-size: 15px; font-weight: 700; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.car-plate.none { color: var(--faint); font-weight: 500; letter-spacing: 0; font-size: 12px; }
.car-name { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.col-what { max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.col-what a { color: var(--text); font-weight: 600; text-decoration: none; }
.col-what a:hover { color: var(--blue); }
.col-what .muted { color: var(--faint); }
.report-note { display: block; margin-top: 4px; color: #d2bcff; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.report-status-chip { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.report-status-chip.pending { color: var(--amber); background: rgba(244, 182, 75, .12); }
.report-status-chip.confirmed { color: var(--red); background: rgba(255, 97, 115, .12); }
.report-status-chip.clear { color: var(--faint); background: var(--panel-3); font-weight: 500; }
.report-table .col-action { text-align: right; white-space: nowrap; }
.report-status-chip.norm { color: var(--green); background: rgba(51, 211, 155, .12); }
.report-open { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel-2); color: var(--text); font-size: 12px; text-decoration: none; }
.report-open:hover { border-color: var(--blue); }
.report-empty { padding: 16px 14px; color: var(--muted); }
.report-empty button { margin-left: 10px; min-height: 32px; color: var(--text); }
.report-more { display: block; width: 100%; min-height: 40px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); font-size: 12px; }
.report-more:hover { background: var(--panel-2); }
.report-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--muted); font-size: 11px; }

/* Классы, которые использует оперативный раздел */
.post-switch { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.post-switch select { width: 100%; padding: 7px 9px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel-2); }
.report-source-note { color: var(--amber); padding: 8px 13px; border-bottom: 1px solid var(--line); margin: 0; font-size: 11px; }
.incident-card.report-target { outline: 1px solid var(--blue); outline-offset: 2px; }
.app-shell[data-mode=reports] #mobileMenuButton { display: none; }
.app-shell[data-mode=reports] #liveState { display: none; }
.report-mobile-site { display: none; }
.report-period button:focus-visible, .report-chip:focus-visible, .report-metric:focus-visible, .report-open:focus-visible, .report-open-post:focus-visible, .col-what a:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

@media (max-width: 880px) {
  .report-mobile-site { display: flex; align-items: center; gap: 12px; width: 100%; color: var(--muted); font-size: 12px; }
  .report-mobile-site select { flex: 1; min-width: 0; min-height: 40px; border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 12px; background: var(--panel-2); color: var(--text); }
  .reports-content { padding: 10px 12px 18px; }
  #modes button { padding-inline: 11px; }
}
@media (max-width: 620px) {
  .reports-content { padding: 8px 8px 16px; }
  .report-toolbar { gap: 6px; }
  .report-period { width: 100%; }
  .report-period button { flex: 1; min-height: 40px; padding-inline: 6px; }
  .report-post-chips { width: 100%; flex: none; }
  .report-chip { min-height: 36px; }
  .report-metrics { gap: 6px; }
  .report-metric { flex-direction: column; align-items: flex-start; gap: 1px; min-height: 56px; padding: 7px 9px; }
  .report-metric-value { font-size: 20px; }
  .report-metric-label { font-size: 11px; color: var(--muted); line-height: 1.2; }
  .report-metric-note { display: none; }
  .report-table { min-width: 620px; }
  .col-what { max-width: 240px; }
  .report-table th, .report-table td { padding: 8px 8px; }
  .col-thumb { display: none; }
  .report-open { min-height: 36px; }
  .report-table-head { flex-wrap: wrap; padding: 7px 10px; }
  .report-footer { flex-wrap: wrap; }
  .report-error { flex-wrap: wrap; }
}