/*
 * HelenaCRM · Relatório de atendimentos
 * Design: tema claro do Fuse / Inter; inspirado nas telas de referência.
 * As cores das tags NÃO são definidas aqui: vêm de /core/v1/tag.
 */

:root {
  --bg-page: #ffffff;
  --bg-muted: #f1f5f9;
  --bg-soft: #f8fafc;
  --text: #1e293b;
  --text-strong: #112745;
  --text-muted: #64748b;
  --text-hint: #94a3b8;
  --border: #e2e8f0;
  --brand: #2196f3;
  --brand-light: #e2ecfd;
  --link: #506f9e;

  /* Escala de fonte do stylesheet enviado: html 16px, body 14px. */
  --font-base: 14px;
  --font-label: 13px;
  --font-small: 12px;
  --font-tiny: 11px;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  font-family: "Inter var", Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--font-base);
  line-height: 1.45;
  color: var(--text);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.report {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  background: var(--bg-page);
}

/* Cabeçalho */

.report__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  padding: 32px 25px 16px;
}

.report h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 750;
  letter-spacing: -0.7px;
  color: var(--text-strong);
}

.report__count {
  margin: 2px 0 0;
  color: var(--link);
  font-size: 14px;
}

.report__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 18px;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #cdd9e7;
  background: #ffffff;
  transition: background 120ms;
  white-space: nowrap;
}

.button:hover {
  background: #f6f9fc;
}

.button--outline {
  border-radius: 24px;
}

.button--square {
  border-radius: 5px;
}

.button svg {
  width: 18px;
  height: 18px;
  color: #6581a3;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* Filtros */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 25px 30px;
}

.input {
  height: 42px;
  padding: 0 13px;
  border: 1px solid #cbd8e7;
  border-radius: 5px;
  background: #ffffff;
  color: var(--text);
  font-size: 13px;
}

.input::placeholder {
  color: #92a6c1;
}

.filters__search {
  width: 239px;
}

.filters__advanced {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  padding: 12px 0 0;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--text-muted);
  font-size: var(--font-small);
}

.filter-field .input {
  min-width: 147px;
}

.filters__advanced > .button {
  align-self: end;
  height: 42px;
}

.demo-label {
  margin-left: auto;
  border-radius: 4px;
  padding: 7px 9px;
  background: #f1f5f9;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #788ea8;
  text-transform: uppercase;
}

.error-box {
  padding: 10px 25px;
  color: #a52331;
  background: #fff0f1;
  font-size: 13px;
}

/* Tabela: densidade e escala próximas da tela original */

.table-scroll {
  flex: 1 0 auto;
  overflow: visible;
  border-top: 1px solid var(--border);
  min-height: 260px;
}

.attendances {
  width: 100%;
  min-width: 1110px;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
}

.col-contact { width: 23%; }
.col-channel { width: 11%; }
.col-dates { width: 16%; }
.col-origin { width: 11%; }
.col-source { width: 15%; }
.col-campaign { width: 12%; }
.col-details { width: 12%; }

.attendances thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.attendances th {
  height: 44px;
  padding: 11px 15px;
  background: #f0f4f8;
  border-bottom: 1px solid #dce5ee;
  font-size: 13px;
  font-weight: 600;
  color: #617b9e;
}

.attendances tbody tr {
  cursor: pointer;
  transition: background 120ms;
}

.attendances tbody tr:hover {
  background: #f7fafc;
}

.attendances td {
  padding: 9px 15px;
  min-height: 58px;
  height: 61px;
  border-bottom: 1px solid #e1e8f0;
  font-size: 13px;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.contact-name {
  font-size: 14px;
  font-weight: 600;
  color: #142b4d;
  line-height: 1.35;
}

.contact-phone,
.cell-subtext {
  margin-top: 3px;
  font-size: 12px;
  color: #758eac;
  line-height: 1.3;
}

.cell-upper {
  font-size: 11px;
  color: #58789f;
  text-transform: uppercase;
  line-height: 1.65;
}

.cell-primary {
  color: #284769;
}

.cell-secondary {
  margin-top: 3px;
  color: #718cad;
  font-size: 12px;
}

.channel {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: #5a789c;
  font-size: 13px;
}

.channel__mark {
  display: inline-block;
  width: 11px;
  height: 11px;
  background: #20c45b;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #1ebd59;
}

.status {
  display: inline-flex;
  margin-top: 4px;
  padding: 3px 7px;
  border-radius: 2px;
  background: #e3e9f1;
  color: #425b7b;
  font-size: 11px;
  line-height: 1.2;
}

.status--pending { background: #fff0bb; color: #957017; }
.status--done { background: #e2f2e8; color: #306a51; }
.status--progress { background: #e3edfb; color: #456e9e; }

/* As cores vêm do backend. Sem cor cadastrada => cinza neutro. */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}

.tag {
  display: inline-flex;
  max-width: 100%;
  padding: 2px 5px;
  border-radius: 2px;
  background: var(--tag-bg, #e2e8f0);
  color: var(--tag-fg, #475569);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.fields-link {
  display: inline-flex;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: var(--link);
  font-size: 12px;
}

.fields-link:hover {
  text-decoration: underline;
}

.table-empty {
  padding: 38px !important;
  text-align: center;
  color: var(--text-muted);
}

/* Rodapé */

.report__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 43px;
  padding: 5px 15px;
  background: #f8fafc;
  border-top: 1px solid #e3eaf2;
  font-size: 12px;
  color: #788ea8;
}

.page-button {
  border: 0;
  background: transparent;
  color: #7189a6;
  padding: 0 7px;
  font-size: 25px;
  line-height: 1;
}

/* Janela de detalhes, baseada na captura original */

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  padding: 18px;
  background: rgba(23, 40, 65, 0.48);
}

.modal {
  width: min(860px, 100%);
  max-height: min(92vh, 950px);
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(17, 39, 69, 0.25);
  overflow: auto;
}

.modal__topbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 22px 0 54px;
  background: #eff3f8;
  border-bottom: 1px solid #e0e7f0;
}

.modal__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #203856;
}

.modal__close {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: #e1e9f1;
  color: #627891;
  font-size: 23px;
  font-weight: 300;
  line-height: 1;
}

.modal__content {
  padding: 20px 54px 42px;
}

.modal__actions {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}

.contact-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  row-gap: 20px;
}

.field-label {
  color: #6e85a3;
  font-size: 13px;
  line-height: 1.4;
}

.field-value {
  margin-top: 2px;
  color: #1e304c;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.divider {
  height: 1px;
  margin: 26px 0 20px;
  background: #e0e7ee;
}

.custom-header {
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #244366;
}

.contact-groups {
  display: grid;
  gap: 13px;
}

.custom-group {
  padding: 19px 23px 21px;
  border: 1px solid #dce4ed;
  border-radius: 9px;
  background: #f8fafc;
}

.custom-group__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 15px;
  border-bottom: 1px solid #e0e7ee;
  color: #5a7396;
  font-size: 14px;
  font-weight: 500;
}

.custom-group__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 29px;
}

.custom-group__fields .field-value a {
  color: #4f46e5;
  text-decoration: none;
}

.custom-group__fields .field-value a:hover {
  text-decoration: underline;
}

.missing-fields {
  margin: 13px 0 0;
  padding: 12px 14px;
  border: 1px solid #fed9a8;
  border-radius: 6px;
  background: #fffbeb;
  color: #8a6814;
  font-size: 12px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 99;
  max-width: calc(100vw - 40px);
  padding: 12px 18px;
  border-radius: 6px;
  box-shadow: 0 8px 26px #0003;
  background: var(--text);
  color: #ffffff;
  font-size: 13px;
}

@media (max-width: 900px) {
  .report__header { padding: 22px 17px 15px; }
  .filters { padding: 0 17px 22px; }
  .report h1 { font-size: 27px; }
  .modal__content { padding: 20px 30px 34px; }
  .modal__topbar { padding-left: 30px; }
}

@media (max-width: 600px) {
  .report h1 { font-size: 24px; }
  .report__actions { gap: 7px; }
  .button { padding: 0 12px; }
  .filters__search { flex: 1; min-width: 180px; }
  .demo-label { margin-left: 0; }
  .modal-backdrop { padding: 0; }
  .modal { height: 100%; max-height: none; border-radius: 0; }
  .contact-overview,
  .custom-group__fields { grid-template-columns: 1fr; }
  .custom-group { padding: 17px; }
  .modal__content { padding: 17px 19px 28px; }
  .modal__topbar { padding: 0 19px; }
}

/* LeadChat: valores visuais derivados da captura de referência fornecida. */
:root {
  --bg-page: #ffffff;
  --bg-muted: #f1f5f9;
  --bg-soft: #f8fafc;
  --text: #1e293b;
  --text-strong: #1e293b;
  --text-muted: #687d9d;
  --text-hint: #93a5c0;
  --border: #dfe6f0;
  --brand: #5145e5;
  --brand-light: #eeecff;
  --link: #687d9d;
}
.report { height: auto; min-height: 100dvh; }
.report__header { flex: none; align-items: center; padding: 38px 3% 22px 2.3%; gap: 24px; }
.report h1 { font-size: clamp(32px, 2.3vw, 44px); font-weight: 750; line-height: 1.15; letter-spacing: -1.1px; }
.report__count { margin-top: 1px; color: var(--text-muted); font-size: clamp(14px, 1vw, 19px); font-weight: 500; }
.report__actions { padding-top: 0; gap: 16px; }
.button { height: 48px; padding: 0 24px; border-color: #cbd7e8; font-size: 15px; font-weight: 500; color: var(--text); }
.button--outline { border-radius: 999px; }
.button--square { border-radius: 6px; color: var(--text-hint); }
.button svg { width: 22px; height: 22px; color: #657994; }
.button:hover { background: #f8fafc; border-color: #a9bad1; }
.button:active { background: #eef2f7; }
#refresh-btn { order: 3; }
.filters { flex: none; gap: 11px; padding: 0 2.3% 42px; }
.input { height: 48px; border-color: #cbd7e8; border-radius: 6px; font-size: 15px; box-shadow: 0 2px 3px #1e293b06; }
.input::placeholder { color: var(--text-hint); }
.filters__search { width: 300px; max-width: 100%; padding: 0 20px; }
#toggle-filters { min-width: 156px; justify-content: space-between; gap: 20px; box-shadow: 0 2px 3px #1e293b08; }
#toggle-filters span { font-size: 0; width: 0; height: 0; border: 5px solid transparent; border-top-color: #687d9d; transform: translateY(3px); }
#toggle-filters[aria-expanded='true'] span { transform: rotate(180deg) translateY(3px); }
#toggle-filters[aria-expanded='true'] { background: var(--bg-muted); color: #536b8d; }
.filters__advanced { margin-top: 8px; padding: 18px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 6px; gap: 14px; }
.filter-field { flex: 1 1 145px; color: var(--text-muted); }
.filter-field .input { width: 100%; min-width: 0; }
.filters__advanced > .button { height: 48px; }
.demo-label { background: var(--bg-muted); color: #687d9d; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; }
.table-scroll { min-height: 120px; max-height: none; flex: 1 0 auto; }
.attendances { min-width: 1140px; }
.attendances th { height: 54px; padding: 14px 20px; color: #657994; background: #f1f5f9; border-bottom-color: var(--border); font-size: 14px; font-weight: 600; }
.attendances td { height: 67px; padding: 8px 20px; border-bottom-color: var(--border); font-size: 14px; }
.attendances th:first-child, .attendances td:first-child { padding-left: clamp(25px, 2.3vw, 44px); }
.contact-name { font-size: 16px; font-weight: 500; color: var(--text-strong); }
.contact-phone, .cell-subtext { margin-top: 4px; color: var(--text-muted); font-size: 13px; }
.cell-primary { color: var(--text); }
.cell-secondary { color: var(--text-muted); font-size: 13px; }
.cell-upper { color: var(--text-muted); font-size: 11px; line-height: 1.9; }
.channel { color: var(--text-muted); font-size: 13px; }
.status { padding: 4px 9px; border-radius: 2px; background: #e2e8f0; color: #475569; font-size: 11px; letter-spacing: .02em; }
.status--pending { background: #ffe789; color: #c47b00; }
.status--done { background: #e2f2e8; color: #306a51; }
.status--progress { background: #e3edfb; color: #456e9e; }
.tags { gap: 4px; margin-top: 3px; }
.tag { border-radius: 2px; padding: 2px 5px; font-size: 11px; }
.fields-link { color: #58749a; font-size: 13px; text-align: left; }
.attendances tbody tr:hover { background: #f7f9fc; }
.attendances tbody tr:focus-visible { outline-offset: -2px; }
.report__footer { flex: none; min-height: 60px; gap: 20px; padding: 10px 20px; color: var(--text-muted); font-size: 14px; background: #f8fafc; }
.page-button { width: 30px; height: 32px; font-size: 30px; color: #657994; border-radius: 4px; }
.page-button:hover:not(:disabled) { background: #e8eef5; }
.modal { border-radius: 6px; }
.modal__topbar { height: 52px; background: #f1f5f9; }
.modal__close:hover { background: #d3deeb; }
.custom-group__fields .field-value a { color: var(--brand); }
@media (min-width: 1700px) {
  .button, .input { height: 54px; font-size: 18px; }
  .button { padding-inline: 28px; }
  .button svg { width: 26px; height: 26px; }
  .filters__search { width: 324px; }
  #toggle-filters { min-width: 172px; }
  .attendances th { height: 60px; font-size: 16px; }
  .attendances td { font-size: 16px; }
  .contact-name { font-size: 18px; }
  .contact-phone, .cell-secondary, .channel { font-size: 15px; }
  .cell-upper { font-size: 13px; }
  .report__footer { min-height: 68px; font-size: 16px; }
}
@media (max-width: 1000px) {
  .report__header { padding: 28px 24px 20px; }
  .report h1 { font-size: 30px; }
  .report__actions { gap: 8px; }
  .button { height: 42px; padding-inline: 16px; font-size: 13px; }
  .button svg { width: 19px; height: 19px; }
  .filters { padding: 0 24px 28px; }
  .input { height: 42px; font-size: 13px; }
  #toggle-filters { min-width: 130px; }
  .report__footer { min-height: 48px; font-size: 12px; }
}
@media (max-width: 600px) {
  .report { height: auto; min-height: 100dvh; }
  .report__header { padding: 24px 17px 20px; gap: 18px; }
  .report h1 { font-size: 27px; letter-spacing: -.7px; }
  .report__actions { width: 100%; gap: 7px; }
  .report__actions .button { flex: 1; padding-inline: 10px; font-size: 12px; gap: 6px; }
  .filters { padding: 0 17px 24px; }
  .filters__search { width: auto; min-width: 140px; }
  .demo-label { margin-left: 0; }
  .table-scroll { flex: 1 0 auto; max-height: none; }
  .modal__actions .button { height: auto; min-height: 42px; white-space: normal; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* Período sempre visível; aplicado à listagem e às exportações. */
.period-filter { width: 100%; display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 10px; padding: 18px 20px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 6px; }
.period-filter__heading { width: 100%; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; color: var(--text-strong); font-size: 13px; font-weight: 600; }
#period-summary { font-weight: 400; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.period-filter .filter-field { flex: 0 1 190px; font-size: 12px; gap: 6px; }
.period-filter .filter-field:first-of-type { flex-basis: 230px; }
.period-filter .input { height: 42px; font-size: 13px; width: 100%; min-width: 0; }
.period-filter input[type='date'] { color-scheme: light; font-variant-numeric: tabular-nums; }
.period-filter input[type='date']::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .65; padding: 5px; }
.period-filter__separator { align-self: end; padding-bottom: 12px; color: var(--text-muted); }
.period-filter__apply { height: 42px; font-size: 13px; border-radius: 6px; padding-inline: 18px; background: #fff; color: var(--text-strong); }
.period-filter__error { width: 100%; margin: 0; font-size: 12px; color: #a52331; }
.filters { padding-bottom: 24px; }
@media (max-width: 600px) {
  .period-filter { padding: 14px; gap: 12px; }
  .period-filter .filter-field { flex: 1 1 120px; }
  .period-filter .filter-field:first-of-type { flex-basis: 100%; }
  .period-filter__separator { display: none; }
  .period-filter__apply { width: 100%; }
}

.period-filter .period-filter__week { flex-basis: 290px; }
.period-filter__note { flex-basis: 100%; margin: 2px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.6; }
@media (max-width: 600px) { .period-filter .period-filter__week { flex-basis: 100%; } }


.export-dialog { position: fixed; right: 24px; bottom: 28px; z-index: 40; width: 260px; max-width: calc(100vw - 32px); display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; padding: 16px 18px; border: 1px solid var(--border); border-radius: 9px; color: var(--text); background: #fff; box-shadow: 0 4px 22px #172b4d24; }
.export-dialog progress { flex: 1; width: 150px; min-width: 0; height: 6px; border: 0; border-radius: 999px; overflow: hidden; accent-color: var(--brand); background: var(--bg-muted); }
.export-dialog progress::-webkit-progress-bar { background: var(--bg-muted); border-radius: 999px; }
.export-dialog progress::-webkit-progress-value { background: var(--brand); border-radius: 999px; transition: width .25s; }
#export-percentage { min-width: 38px; text-align: right; color: var(--brand); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.export-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.export-dialog a { width: 100%; height: 30px; padding: 0; border: 0; background: transparent; color: var(--brand); font-size: 12px; text-decoration: none; }
.export-dialog[data-status='failed'] #export-message { position: static; width: 100%; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; font-size: 12px; color: #a52331; }
@media (max-width: 600px) { .export-dialog { right: 16px; bottom: 24px; } }
@media (max-width: 600px) { .filters input, .filters select { font-size: 16px; min-height: 44px; } .button, .page-button, .modal__close { min-height: 44px; } }