/* ================================================================
   STYLE.CSS — Aula 07: Formulário com CEP
   ================================================================
   CONCEITO: 8pt Grid System
   ----------------------------------------------------------------
   O "8pt Grid" significa que todos os espaçamentos (padding,
   margin, gap) são múltiplos de 8px. Isso garante consistência
   visual em toda a página.

   Exemplos de escala:
     4px  → meta ou micro-espaço (0.5x)
     8px  → espaço base
    16px  → espaço médio (2x)
    24px  → espaço grande (3x)
    32px  → espaço muito grande (4x)
    48px  → seções (6x)
    64px  → blocos maiores (8x)

   Usamos variáveis CSS (--var) para facilitar a manutenção.
================================================================ */


/* ================================================================
   1. VARIÁVEIS GLOBAIS (Tokens de Design)
================================================================ */
:root {
  /* --- Paleta de Cores --- */
  --color-bg:         #f4f6f9;    /* Fundo da página */
  --color-surface:    #ffffff;    /* Fundo dos cards/formulário */
  --color-border:     #d1d9e0;    /* Bordas dos inputs */
  --color-primary:    #2563eb;    /* Azul principal */
  --color-primary-dk: #1d4ed8;    /* Azul escuro (hover) */
  --color-danger:     #dc2626;    /* Vermelho para exclusão */
  --color-danger-dk:  #b91c1c;    /* Vermelho escuro (hover) */
  --color-text:       #1e293b;    /* Texto principal */
  --color-muted:      #64748b;    /* Texto secundário/placeholder */
  --color-required:   #dc2626;    /* Asterisco de campo obrigatório */
  --color-success:    #16a34a;    /* Verde para feedback positivo */
  --color-warning:    #ca8a04;    /* Amarelo para avisos */

  /* --- Tipografia --- */
  --font-family:   'Inter', sans-serif;
  --font-size-sm:  0.875rem;   /* 14px */
  --font-size-md:  1rem;       /* 16px */
  --font-size-lg:  1.25rem;    /* 20px */
  --font-size-xl:  1.5rem;     /* 24px */

  /* --- Espaçamentos (8pt Grid) --- */
  --space-1: 4px;    /* 0.5 × 8 */
  --space-2: 8px;    /* 1  × 8 */
  --space-3: 16px;   /* 2  × 8 */
  --space-4: 24px;   /* 3  × 8 */
  --space-5: 32px;   /* 4  × 8 */
  --space-6: 48px;   /* 6  × 8 */
  --space-7: 64px;   /* 8  × 8 */

  /* --- Bordas e Sombras --- */
  --radius:     8px;
  --radius-sm:  4px;
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.10);
}


/* ================================================================
   2. RESET & BASE
   Normaliza estilos diferentes entre navegadores
================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box; /* O padding e a borda entram na largura total */
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  color: var(--color-text);
  background-color: var(--color-bg);

  /* Espaçamento vertical usando o grid de 8pt */
  padding: var(--space-4) var(--space-3);      /* 24px cima/baixo, 16px lados */

  /* Melhora a legibilidade do texto */
  line-height: 1.5;
}


/* ================================================================
   3. LAYOUT — Estrutura da Página
================================================================ */

/* Cabeçalho da página */
.page-header {
  text-align: center;
  margin-bottom: var(--space-5);   /* 32px */
}

.page-header h1 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);   /* 8px */
}

.page-header p {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

/* Container central — limita a largura do conteúdo */
.container {
  max-width: 960px;      /* largura máxima */
  margin: 0 auto;        /* centraliza horizontalmente */
  display: flex;
  flex-direction: column;
  gap: var(--space-5);   /* 32px entre as seções */
}


/* ================================================================
   4. CARDS / SEÇÕES
   Cada "seção" é um card branco com sombra
================================================================ */
.form-section,
.table-section {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);

  /* Espaçamento interno usando o grid: 32px */
  padding: var(--space-5);
}

/* Título de cada seção */
.form-section h2,
.table-section h2 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--space-4);   /* 24px */
  padding-bottom: var(--space-2);  /* 8px */
  border-bottom: 2px solid var(--color-primary);
}


/* ================================================================
   5. FORMULÁRIO — Grid de Colunas
================================================================ */

/* Linha do formulário: usa CSS Grid para distribuir campos */
.form-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);  /* 12 colunas fluidas */
  gap: var(--space-3);                     /* 16px entre os campos */
  margin-bottom: var(--space-3);           /* 16px entre linhas */
}

/* --- Tamanhos dos campos (ocupam X das 12 colunas) --- */
.form-group {
  grid-column: span 4;  /* padrão: 4 colunas (1/3 da largura) */
}

.form-group--tiny {
  grid-column: span 2;  /* campo pequeno: 2 colunas */
}

.form-group--small {
  grid-column: span 3;  /* campo pequeno-médio: 3 colunas */
}

.form-group--large {
  grid-column: span 7;  /* campo largo: 7 colunas */
}

.form-group--full {
  grid-column: span 12; /* campo que ocupa a linha toda */
}


/* ================================================================
   6. CAMPOS DE INPUT (label + input/select)
================================================================ */

/* Rótulo do campo */
.form-group label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);   /* 4px entre label e input */
}

/* Asterisco de campo obrigatório */
.required {
  color: var(--color-required);
  margin-left: var(--space-1);     /* 4px */
}

/* Estilo base para inputs e select */
.form-group input,
.form-group select {
  width: 100%;
  padding: var(--space-2) var(--space-3);   /* 8px vertical, 16px horizontal */
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);

  /* Transição suave ao receber foco */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Estilo ao clicar/focar no campo */
.form-group input:focus,
.form-group select:focus {
  outline: none;                          /* remove contorno padrão */
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);  /* anel azul sutil */
}

/* Estilo quando o campo está desabilitado (preenchido pela API) */
.form-group input:disabled {
  background-color: #f1f5f9;
  color: var(--color-muted);
  cursor: not-allowed;
}

/* Placeholder (texto de exemplo dentro do input) */
.form-group input::placeholder {
  color: var(--color-muted);
}


/* ================================================================
   7. STATUS DO CEP
   Pequeno texto de feedback abaixo do campo de CEP
================================================================ */
.field-status {
  display: block;
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);   /* 4px */
}

/* Modificadores de estado */
.field-status.success { color: var(--color-success); }
.field-status.error   { color: var(--color-danger);  }
.field-status.loading { color: var(--color-warning); }


/* ================================================================
   8. BOTÕES
================================================================ */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);             /* 16px entre os botões */
  margin-top: var(--space-4);      /* 24px acima dos botões */
}

/* Estilo base de todos os botões */
.btn {
  padding: var(--space-2) var(--space-5);   /* 8px vertical, 32px horizontal */
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Pequena animação ao clicar */
.btn:active {
  transform: scale(0.98);
}

/* Botão primário (azul) */
.btn--primary {
  background-color: var(--color-primary);
  color: #ffffff;
}

.btn--primary:hover {
  background-color: var(--color-primary-dk);
}

/* Botão secundário (cinza claro) */
.btn--secondary {
  background-color: #e2e8f0;
  color: var(--color-text);
}

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

/* Botão de perigo (vermelho) — usado na tabela para excluir */
.btn--danger {
  background-color: transparent;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  padding: var(--space-1) var(--space-2);   /* botão menor */
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn--danger:hover {
  background-color: var(--color-danger);
  color: #ffffff;
}


/* ================================================================
   9. TABELA DE REGISTROS
================================================================ */
.table-wrapper {
  overflow-x: auto;   /* scroll horizontal em telas pequenas */
}

table {
  width: 100%;
  border-collapse: collapse;   /* remove espaço entre bordas das células */
  font-size: var(--font-size-sm);
}

/* Células do cabeçalho */
table thead th {
  text-align: left;
  font-weight: 600;
  color: var(--color-muted);
  padding: var(--space-2) var(--space-3);     /* 8px × 16px */
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}

/* Células do corpo da tabela */
table tbody td {
  padding: var(--space-2) var(--space-3);     /* 8px × 16px */
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

/* Efeito zebra: linhas alternadas com fundo levemente diferente */
table tbody tr:nth-child(even) {
  background-color: #f8fafc;
}

/* Efeito hover na linha */
table tbody tr:hover {
  background-color: #eff6ff;
}

/* Mensagem quando não há registros */
.empty-message {
  text-align: center;
  color: var(--color-muted);
  padding: var(--space-5) 0;   /* 32px */
  font-size: var(--font-size-sm);
}


/* ================================================================
   10. RESPONSIVIDADE
   Em telas pequenas (celular), empilhamos os campos
================================================================ */
@media (max-width: 640px) {

  body {
    padding: var(--space-3);   /* 16px em telas pequenas */
  }

  /* Todos os campos passam a ocupar a linha toda no celular */
  .form-group,
  .form-group--tiny,
  .form-group--small,
  .form-group--large,
  .form-group--full {
    grid-column: span 12;
  }

  /* Botões também ocupam a linha toda */
  .form-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    text-align: center;
  }
}