/*
  Estilos para a interface de envio de notificações push.
  O objetivo deste arquivo é reproduzir a aparência limpa e organizada do
  painel do Notix, utilizando uma paleta de cores suaves com destaque para
  verde.  Comentários ao longo do código ajudam a entender a finalidade
  de cada regra.
*/

/* Variáveis de cores para facilitar ajustes globais */
/*
  Redefinimos a paleta de cores base para aproximar o visual da
  interface do painel original do Hub Invest Imóveis.  Em vez do
  tema esverdeado, agora utilizamos tons de azul claro e cinza,
  semelhantes aos mostrados na captura de tela fornecida pelo usuário.
*/
:root {
  /* Cor principal utilizada em botões e destaques */
  --primary-color: #0066cc;
  /* Fundo suave para caixas e áreas diferenciadas */
  --secondary-color: #f5f9ff;
  /* Cor de bordas e divisores discretos */
  --border-color: #d6e0f5;
  /* Cores de texto primário e secundário */
  --text-color: #1e293b;
  --subtext-color: #475569;
  /* Cor de fundo geral da página */
  --background-color: #f2f6fb;
  /* Cor usada em áreas realçadas (como caixas de segmentação) */
  --highlight-color: #eef3fb;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
}

.container {
  display: flex;
  flex-direction: row;
  gap: 24px;
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

/* Seção do formulário */
.form-section {
  flex: 1 1 60%;
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}

.form-section h1 {
  font-size: 1.5rem;
  margin-bottom: 16px;
}

.section-title {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 1rem;
}

.form-group {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 600;
  margin-bottom: 6px;
}


.form-group input,
.form-group textarea {
  /* Aumentamos o padding para maior conforto na digitação e
     definimos um fundo azul claríssimo, alinhado ao visual do
     portal de login.  */
  padding: 10px 12px;
  background-color: #f7faff;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.9rem;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--primary-color);
  background-color: #ffffff;
}

.form-group small {
  font-size: 0.8rem;
  color: var(--subtext-color);
  margin-top: 4px;
}

/* Idiomas */
.languages-section {
  margin-bottom: 24px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--secondary-color);
  padding: 16px;
}

.languages-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.languages-header span {
  font-weight: bold;
}

.btn-add {
  background: none;
  border: none;
  color: var(--primary-color);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 8px;
}

.btn-add:hover {
  text-decoration: underline;
}

.language-entry {
  border: 1px dashed var(--border-color);
  border-radius: 4px;
  background-color: #fff;
  padding: 12px;
  margin-top: 12px;
}

.language-header {
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--primary-color);
}

/* Imagens */
.images-section {
  margin-bottom: 24px;
}

.radio-group {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.radio-group input {
  margin-right: 6px;
}

.image-upload-box {
  border: 1px dashed var(--border-color);
  border-radius: 4px;
  padding: 12px;
  background-color: #fff;
  margin-bottom: 12px;
}

.image-upload-box .image-label {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--primary-color);
}

.image-upload-box .image-guideline {
  font-size: 0.8rem;
  color: var(--subtext-color);
  margin-bottom: 8px;
}

.image-note {
  font-size: 0.75rem;
  color: var(--subtext-color);
  margin-top: 8px;
}

/* Segmentação e programação */
.toggle-section {
  margin-bottom: 24px;
}

.toggle-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.toggle-label {
  cursor: pointer;
}

.toggle-description {
  font-size: 0.8rem;
  color: var(--subtext-color);
}

.toggle-options {
  margin-top: 12px;
  border-left: 3px solid var(--border-color);
  padding-left: 12px;
  background-color: var(--highlight-color);
  border-radius: 4px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.info-text {
  font-size: 0.8rem;
  color: var(--subtext-color);
  margin-bottom: 12px;
}

/* Botões */
.buttons {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

/*
  Ajuste na área de botões de ação: além do botão principal para
  disparo, agora a interface inclui botões para agendar o envio e
  adicionar a mensagem à automação.  Utilizamos a classe
  `.action-buttons` para possibilitar layouts personalizados e
  espaçamentos distintos sem interferir nos outros botões.  */
.action-buttons {
  flex-wrap: wrap;
}

/* Botão de ação secundária dentro da tabela de agendados */
.btn-secondary-action {
  background-color: #f5f7fa;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-secondary-action:hover {
  background-color: #e9eef8;
}

/* Modal de agendamento */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modal-content h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.2rem;
  color: var(--text-color);
}

.modal-buttons {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.btn-primary,
.btn-secondary {
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s ease;
}

/*
  Botões primários utilizam a cor principal de destaque.  Para
  proporcionar melhor contraste ao usuário, no estado hover o tom é
  ligeiramente escurecido.  Ajustamos estes valores para azul.  */
.btn-primary {
  background-color: var(--primary-color);
  color: #fff;
}

.btn-primary:hover {
  /* tonalidade mais escura da cor principal */
  background-color: #004a99;
}

/*
  Botão secundário passa a usar um cinza muito claro para manter
  consistência com o restante da interface.  */
.btn-secondary {
  background-color: #f5f7fa;
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background-color: #e9eef8;
}

/* Mensagens de resposta */
.response {
  margin-top: 12px;
  font-size: 0.85rem;
}

.response.success {
  color: #1a8f44;
}

.response.error {
  color: #c0392b;
}

/* Seção de visualização */
.preview-section {
  flex: 1 1 40%;
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.preview-device {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 16px;
}

.preview-screen {
  width: 100%;
  background-color: #f0f4f3;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.05);
}

.preview-message {
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--subtext-color);
}

.preview-icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover;
  background-color: #ddd;
}

.preview-info {
  display: flex;
  align-items: center;
  gap: 4px;
}

.preview-info .dot {
  margin: 0 2px;
}

.preview-content p {
  margin: 0;
}

#preview-title {
  font-weight: 600;
  color: var(--text-color);
  font-size: 0.9rem;
}

#preview-text {
  font-size: 0.8rem;
  color: var(--subtext-color);
}

.preview-big-image {
  width: 100%;
  margin-top: 6px;
  border-radius: 4px;
  object-fit: cover;
  display: none; /* oculto por padrão */
}

.preview-note,
.preview-footnote {
  font-size: 0.75rem;
  color: var(--subtext-color);
  margin-top: 8px;
  line-height: 1.3;
}

/* Estilos para a tela de login */
/*
  Estilos dedicados à tela de login.  A caixa central tem um aspecto
  semelhante ao do painel de login fornecido, com bastante espaço em
  branco e bordas suaves.  Um elemento para o logotipo ou nome da
  empresa pode ser centralizado dentro deste contêiner.  */
.login-container {
  max-width: 450px;
  margin: 80px auto;
  background-color: #fff;
  padding: 40px 32px;
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* O formulário dentro da tela de login deve ocupar toda a largura
   disponível, alinhando‑se com o contêiner pai */
.login-container form {
  width: 100%;
}

/* Título e logotipo na tela de login.  O título é opcional; pode ser
   substituído por um logotipo customizado via HTML.  */
.login-container h1 {
  width: 100%;
  text-align: center;
  margin-bottom: 24px;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
}

/* Classe utilitária para o logotipo (texto ou imagem) no topo da
   página de login. */
.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}

.login-logo span {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary-color);
  text-align: center;
}

/* Subtítulo usado na tela de login para indicar a natureza do
   formulário (por exemplo, “Acesso Restrito”).  É exibido logo abaixo
   do logotipo. */
.subheading {
  margin-top: -16px;
  margin-bottom: 24px;
  font-size: 0.9rem;
  color: var(--subtext-color);
  text-align: center;
}

/* Classes utilitárias */
.hidden {
  display: none !important;
}

/* Barra de navegação superior com links de administrador */
.top-nav {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-bottom: 16px;
}

.top-nav a {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
}

.top-nav a:hover {
  text-decoration: underline;
}

/*
  Layout principal com barra lateral e conteúdo.  A barra lateral
  permanece fixa na lateral esquerda e contém links de navegação.  O
  conteúdo ocupa o restante da largura.  */
.layout {
  display: flex;
  min-height: 100vh;
}

/* Barra lateral: logo no topo e links empilhados. */
.sidebar {
  width: 220px;
  background-color: #fff;
  border-right: 1px solid var(--border-color);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
}

/* Logo na barra lateral */
.sidebar .logo {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 32px;
  line-height: 1.2;
}

/* Navegação na barra lateral */
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item {
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-color);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  display: block;
}

.nav-item.active {
  background-color: var(--primary-color);
  color: #ffffff;
}

.nav-item:hover {
  background-color: var(--secondary-color);
}

/* Oculta itens de navegação reservados a administradores */
.admin-only {
  display: none;
}

/* Conteúdo principal deslocado pela largura da sidebar */
.content {
  margin-left: 220px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--background-color);
}

/* Barra superior fixa dentro da área de conteúdo */
.topbar {
  height: 60px;
  background-color: #fff;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 24px;
}

.topbar .version {
  margin-right: auto;
  font-size: 0.8rem;
  color: var(--subtext-color);
}

.topbar .user-greeting {
  margin-right: 16px;
  font-size: 0.9rem;
  color: var(--subtext-color);
}

.topbar a {
  color: var(--primary-color);
  font-weight: 500;
  text-decoration: none;
}

.topbar a:hover {
  text-decoration: underline;
}

/* Área de conteúdo principal dentro da página */
.content-main {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: row;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* === Páginas de histórico de notificações === */
/* Cabeçalho da página de histórico */
.page-header {
  margin-bottom: 16px;
}

.page-header h1 {
  font-size: 1.4rem;
  margin: 0 0 8px;
  color: var(--text-color);
}

/* Contêiner da tabela */
.table-section {
  flex: 1;
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow-x: auto;
  padding: 16px;
}

/* Estilos da tabela de envios */
.sendings-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}

.sendings-table thead {
  background-color: var(--secondary-color);
}

.sendings-table th,
.sendings-table td {
  padding: 12px 8px;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border-color);
}

.sendings-table th {
  font-weight: 600;
  text-align: left;
  color: var(--text-color);
}

.sendings-table td {
  color: var(--subtext-color);
  vertical-align: top;
}

/* Botão dentro da tabela de notificações para adicionar à automação */
.btn-table-action {
  padding: 6px 12px;
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-table-action:hover {
  background-color: #004a99;
}

/* Título e descrição dentro da coluna Notificação */
.notif-title {
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 2px;
}

.notif-desc {
  font-size: 0.75rem;
  color: var(--subtext-color);
}

/* === Automação: lista de sequência === */
/* Linha da sequência */
.sequence-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 12px;
}

/* Coluna de atraso */
.sequence-delay {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 120px;
  margin-right: 12px;
  font-size: 0.8rem;
  color: var(--subtext-color);
}

.sequence-delay-input {
  width: 60px;
  padding: 4px;
  margin-top: 4px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.8rem;
}

.sequence-delay-select {
  margin-top: 4px;
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.8rem;
}

/* Coluna de conteúdo (toggle + mensagem) */
.sequence-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sequence-toggle input[type='checkbox'] {
  width: 20px;
  height: 20px;
}

.sequence-title {
  font-weight: 600;
  color: var(--text-color);
  font-size: 0.9rem;
}

.sequence-desc {
  font-size: 0.75rem;
  color: var(--subtext-color);
}

/* Coluna de métricas */
.sequence-metrics {
  display: flex;
  gap: 16px;
  min-width: 200px;
  justify-content: flex-end;
  font-size: 0.75rem;
  color: var(--subtext-color);
}

.sequence-metrics div {
  text-align: center;
}

.sequence-metrics strong {
  display: block;
  font-size: 0.9rem;
  color: var(--text-color);
}

/* Coluna de remoção */
.sequence-delete {
  margin-left: 12px;
}

.sequence-delete-btn {
  background: none;
  border: none;
  font-size: 1rem;
  color: #c0392b;
  cursor: pointer;
}

.sequence-delete-btn:hover {
  color: #e74c3c;
}