/* ============================================================
   RELATÓRIOS (/ = index.html + app.js) — camada da marca Flua
   (design/export/Relatórios/*).

   Carregado por ÚLTIMO, só pela index.html. O CSS da tela (sidebar, lista,
   modal de parâmetros, SearchableSelect do modal) mora no styles.css, que é
   compartilhado por várias páginas — por isso a aparência nova fica aqui e não
   lá. Como só esta página carrega o arquivo, o seletor não precisa de escopo
   extra; quando o styles.css/agenda.css vence por especificidade, o seletor
   daqui repete a mesma cadeia. Só aparência: layout e comportamento seguem no
   styles.css. Tokens: flua.css.
   ============================================================ */

body,
body.embed-mode {
  background-color: var(--color-bg-page);
}

/* ---------- Layout ---------- */
.main-container {
  padding: 16px;
}

.sidebar {
  width: 288px;
  margin-right: 16px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.sidebar .form-group {
  margin-bottom: 14px;
}

.sidebar .form-group label {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--flua-navy);
}

.sidebar .form-group input[type="text"] {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--h-ffffff, #fff);
  font-family: inherit;
  font-size: 15px;
  color: var(--flua-navy);
}

.sidebar .form-group input[type="text"]::placeholder {
  color: var(--text-muted);
}

.sidebar .form-group input[type="text"]:focus {
  border-color: var(--flua-navy);
  box-shadow: inset 0 0 0 1px var(--flua-navy);
}

/* Atalhos de admin (Relatórios Automáticos / Visibilidade): botão secundário */
.agend-nav-btn {
  justify-content: center;
  min-height: 44px;
  margin-top: 14px;
  padding: 10px 18px;
  border: 1.5px solid var(--flua-navy);
  border-radius: var(--radius-pill);
  background: var(--h-ffffff, #fff);
  color: var(--flua-navy);
  font-size: 15px;
  font-weight: 500;
}

.agend-nav-btn:hover {
  background: rgba(var(--rgb-0b2c45, 11, 44, 69), 0.06);
  color: var(--flua-navy);
}

.content {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.content-header {
  margin-bottom: 16px;
  gap: 12px;
}

.content h2 {
  font-size: 28px;
  font-weight: 400;
  color: var(--flua-navy);
}

/* ---------- Ordenar por (pílulas) ---------- */
.sort-controls {
  gap: 10px;
}

.sort-controls label {
  margin-right: 0;
  font-size: 14px;
  color: var(--text-muted);
}

.sort-btn {
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--h-ffffff, #fff);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--flua-navy);
}

.sort-btn:hover {
  background-color: var(--h-f3f5f7, #F3F5F7);
  border-color: var(--border);
}

.sort-btn.active {
  background-color: var(--flua-navy);
  border-color: var(--flua-navy);
  color: var(--h-ffffff, #fff);
}

/* ---------- Lista ---------- */
.report-list li {
  gap: 10px;
  margin-bottom: 0;
  padding: 12px;
  border-bottom: 1px solid rgba(var(--rgb-0b2c45, 11, 44, 69), 0.08);
  border-radius: 0;
}

.report-list li:hover {
  background-color: var(--h-f3f5f7, #F3F5F7);
  transform: none;
}

.report-list li .report-id {
  min-width: 64px;
  margin-right: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--flua-navy);
}

.report-list li .report-name {
  font-size: 16px;
  font-weight: 400;
  color: var(--flua-navy);
}

/* "Nenhum relatório encontrado." / "Erro ao carregar relatórios." (li sem classe) */
.report-list > li:not(.report-group):not(.report-item) {
  justify-content: center;
  padding: 32px 16px;
  border-bottom: 0;
  color: var(--text-muted);
  cursor: default;
}

.report-list > li:not(.report-group):not(.report-item):hover {
  background: none;
}

/* Cabeçalho de grupo */
.report-list li.report-group {
  margin: 0;
  border-bottom: 0;
}

.report-group-toggle {
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}

.report-group-toggle:hover {
  color: var(--flua-navy);
}

.report-group-name {
  font-size: 12px;
  letter-spacing: 0.48px;
}

.report-group-count {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--status-neutral-bg);
  color: var(--flua-navy);
  font-size: 12px;
}

/* Formato (PDF / Excel) */
.format-badge {
  margin: 0;
  padding: 3px 10px;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
}

.format-badge.pdf {
  border: 0;
  background-color: var(--flua-light-blue);
  color: var(--flua-navy);
}

.format-badge.excel {
  border: 0;
  background-color: var(--status-ok-bg);
  color: var(--status-ok);
}

/* Atalho do dashboard: botão redondo de contorno */
.report-dashboard-btn {
  width: 36px;
  height: 36px;
  margin-left: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--h-ffffff, #fff);
  color: var(--flua-navy);
}

.report-dashboard-btn:hover {
  background: var(--h-f3f5f7, #F3F5F7);
  transform: none;
}

/* ============================================================
   Modal de parâmetros (#parameter-modal)
   ============================================================ */
#parameter-modal .modal-content {
  max-width: 560px;
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-xl);
}

#parameter-modal .modal-header {
  gap: 12px;
}

#parameter-modal .modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  font-size: 26px;
  line-height: 1;
  color: var(--flua-navy);
  opacity: 1;
}

#parameter-modal .modal-close:hover {
  background: rgba(var(--rgb-0b2c45, 11, 44, 69), 0.06);
}

#parameter-modal .modal-body {
  padding: 8px 28px 24px;
  background-color: var(--h-ffffff, #fff);
}

#parameter-modal .modal-body .form-group {
  margin-bottom: 16px;
}

#parameter-modal .modal-body .form-group label {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--flua-navy);
}

#parameter-modal .modal-body .form-group input:not([type="radio"]):not([type="checkbox"]),
#parameter-modal .modal-body .form-group select,
#parameter-modal .modal-body .form-group .ss-input {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--h-ffffff, #fff);
  font-family: inherit;
  font-size: 15px;
  color: var(--flua-navy);
}

#parameter-modal .modal-body .form-group select,
#parameter-modal .modal-body .form-group .ss-input {
  padding-right: 40px;
  background-position: right 16px center;
  background-size: 12px;
}

#parameter-modal .modal-body .form-group input::placeholder,
#parameter-modal .modal-body .form-group .ss-input::placeholder {
  color: var(--text-muted);
}

#parameter-modal .modal-body .form-group input:focus,
#parameter-modal .modal-body .form-group select:focus,
#parameter-modal .modal-body .form-group .ss-input:focus {
  border-color: var(--flua-navy);
  box-shadow: inset 0 0 0 1px var(--flua-navy);
}

#parameter-modal .modal-body .form-group input:disabled,
#parameter-modal .ss-disabled .ss-input,
#parameter-modal .ss-input:disabled {
  background-color: var(--h-eef1f3, #EEF1F3);
  border-color: transparent;
  color: var(--text-muted);
  opacity: 1;
}

#parameter-modal .ss-dropdown {
  border-radius: var(--radius-card);
}

/* Lista de convênios */
#parameter-modal .checkbox-list-container {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

#parameter-modal .modal-body .checkbox-list-container .checkbox-item {
  padding: 5px 0;
  font-size: 14px;
  color: var(--flua-navy);
}

#parameter-modal .checkbox-list-container .checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  accent-color: var(--flua-navy);
}

#parameter-modal .modal-body .checkbox-list-container .checkbox-item-todos {
  margin-bottom: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}

#parameter-modal .checkbox-list-placeholder {
  font-size: 14px;
  color: var(--text-muted);
}

/* Rodapé: Cancelar = ghost; Gerar = principal navy */
#parameter-modal .modal-footer {
  gap: 12px;
  padding: 16px 28px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-modal) var(--radius-modal);
}

#parameter-modal .button-primary,
#parameter-modal .button-secondary {
  gap: 8px;
  min-height: 44px;
  margin-left: 0;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  box-shadow: none;
  transform: none;
}

#parameter-modal .button-primary {
  border: 0;
  background-color: var(--flua-navy);
  color: var(--h-ffffff, #fff);
}

#parameter-modal .button-primary:hover {
  background-color: var(--primary-light);
  box-shadow: none;
  transform: none;
}

#parameter-modal .button-secondary {
  border: 0;
  background-color: transparent;
  color: var(--flua-navy);
}

#parameter-modal .button-secondary:hover {
  background-color: rgba(var(--rgb-0b2c45, 11, 44, 69), 0.06);
  color: var(--flua-navy);
}

/* "Gerando..." visível ao lado do spinner (o styles.css esconde o texto) */
#parameter-modal .button-primary.loading {
  color: var(--h-ffffff, #fff);
}

#parameter-modal .button-primary.loading::after {
  position: static;
  order: -1;
  width: 14px;
  height: 14px;
  margin: 0;
  border-width: 2px;
}

/* ---------- Celular ---------- */
@media (max-width: 768px) {
  .main-container {
    padding: 12px;
  }

  .sidebar {
    width: 100%;
    margin: 0 0 12px;
    padding: 20px;
  }

  .content {
    padding: 20px;
  }

  .content-header {
    gap: 8px;
  }

  .content h2 {
    font-size: 28px;
  }

  .sort-controls label {
    margin-bottom: 0;
  }

  .sort-btn {
    justify-content: center;
    padding: 0 18px;
  }

  .report-list li {
    padding: 12px;
  }

  .report-list li .report-name {
    font-size: 14px;
    font-weight: 500;
  }

  /* Mesma regra do styles.css (auto no 1º badge, 6px nos seguintes), refeita
     porque o "margin: 0" de cima a desfaz */
  .format-badge {
    margin-left: auto;
  }

  .format-badge + .format-badge {
    margin-left: 6px;
  }
}

/* Modal vira folha de baixo; rodapé na ordem que o styles.css já dá (principal em cima) */
@media (max-width: 600px) {
  #parameter-modal.modal-overlay {
    align-items: flex-end;
    padding-top: 56px;
  }

  #parameter-modal .modal-content {
    width: 100%;
    max-width: none;
    max-height: calc(100vh - 56px);
    max-height: calc(100dvh - 56px);
    border-radius: var(--radius-modal) var(--radius-modal) 0 0;
  }

  #parameter-modal .modal-header {
    padding: 16px 12px 8px 20px;
  }

  #parameter-modal .modal-header h3 {
    font-size: 20px;
  }

  #parameter-modal .modal-body {
    flex: 1;
    max-height: none;
    padding: 8px 20px 20px;
  }

  #parameter-modal .modal-footer {
    padding: 16px 20px 28px;
    border-radius: 0;
  }

  #parameter-modal .button-primary,
  #parameter-modal .button-secondary {
    width: 100%;
  }
}