@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

body {
  background: #000525;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  margin: 0;
}

main {
  max-width: 1100px;
  margin: clamp(72px, 10vw, 110px) auto clamp(24px, 6vw, 40px);
  padding: clamp(12px, 3vw, 20px);
}

h1 {
  color: #ffc420;
  font-weight: 600;
  margin-bottom: 20px;
  font-size: clamp(1.4rem, 4vw, 2rem);
}

/* ===== TABELA RESPONSIVA ===== */
.table-container {
  width: 100%;
  overflow-x: auto; /* scroll no mobile */
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  background: #0b1030;
  border-radius: 12px;
  overflow: hidden;
  min-width: 600px; /* garante estrutura mínima */
}

thead {
  background: #141f4f;
}

thead th {
  padding: clamp(8px, 2vw, 12px);
  text-align: left;
  font-weight: 600;
  font-size: clamp(.85rem, 2vw, 1rem);
}

tbody td {
  padding: clamp(6px, 2vw, 10px);
  border-bottom: 1px solid #2a3669;
  font-size: clamp(.85rem, 2vw, 1rem);
}

/* ===== INPUTS ===== */
input {
  width: 100%;
  background: #0c1540;
  color: #fff;
  border: 1px solid #2a3669;
  padding: 8px;
  border-radius: 8px;
  outline: none;
  font-size: clamp(.85rem, 2vw, 1rem);
}

input:focus {
  border-color: #ffc420;
}

/* ===== BOTÕES ===== */
.btn {
  background: #141f4f;
  border: 1px solid #2a3669;
  color: #fff;
  padding: clamp(5px, 1.5vw, 6px) clamp(8px, 2vw, 10px);
  border-radius: 8px;
  cursor: pointer;
  font-size: clamp(.8rem, 2vw, .95rem);
  white-space: nowrap; /* evita quebra em botões pequenos */
}

.btn:hover {
  background: #1a2a6b;
}

.btn.primary {
  background: #ffc420;
  color: #000525;
  border: none;
  font-weight: 600;
}

/* ===== RESPONSIVIDADE ===== */
@media (max-width: 768px) {
  main {
    padding: 12px;
  }
  h1 {
    text-align: center;
  }
  thead th, tbody td {
    white-space: nowrap; /* mantém colunas legíveis no scroll */
  }
}

@media (max-width: 480px) {
  .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}