/* ============================================= */
/* Reset básico e corpo
body {
  /* se você já tiver coisa aqui, só acrescente as linhas de background */
  /* font-family: Arial, sans-serif; */
  /* margin: 30px; */
  /* text-align: center; */
  /* cor de fundo de segurança, caso a imagem não carregue */
  /* background-color: #f9f9f9; */

  /* ====== imagem de fundo ====== */
  /* background-image: url("/static/fundo_watermark.png"); */
  /* background-repeat: repeat;        repete em X e Y */
  /* background-position: top left;    alinhado ao topo/esquerda */
  /* background-size: auto;            sem redimensionar, preserva resolução */
  /* background-attachment: fixed;     /* fixa a imagem no fundo */
/* } */
/* garante que o body seja contexto para o ::before */
body {
  position: relative;
  z-index: 0;
  text-align: center;
  background-color: #f9f9f9; 
  margin: 30px;
  font-family: Arial, sans-serif;
}

/* cria a camada de fundo com opacidade */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("/static/fundo_watermark.png") repeat top left;
  opacity: 0.2;               /* ajuste entre 0 (invisível) e 1 (opaco) */
  pointer-events: none;       /* não bloqueia cliques */
  z-index: -1;                /* fica atrás de todo o resto */
}


.machine-icon {
  width: 40px;       /* ajuste o tamanho que quiser */
  height: 40px;
  vertical-align: middle;
  margin-right: 6px; /* espaço entre o ícone e o texto */
}


/* ============================================= */
/* Container principal */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ============================================= */
/* Títulos */
h1, h2 {
  margin-bottom: 20px;
  text-align: center;
}

/* ============================================= */
/* Resumo Geral */
.resumo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.caixa {
  flex: 1 1 140px;
  max-width: 180px;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
}
/* Cores conforme status */
.caixa.total       { font-size: 1.2em; }
.caixa.ok          { border-color: #28a745; color: #28a745; }
.caixa.alerta      { border-color: #ffc107; color: #ffc107; }
.caixa.falha       { border-color: #dc3545; color: #dc3545; }
.caixa.manutencao  { border-color: #007bff; color: #007bff; }
.caixa.bloqueada   { border-color: #dc3545; color: #dc3545; }

/* ============================================= */
/* Botões de detalhes / voltar */
.btn-detalhes,
.button-container form,
.btn-back {
  text-align: center;
  margin: 1.5rem 0;
}
.btn-detalhes button,
.btn-approve,
.back-link {
  display: inline-block;
  padding: 0.6em 1.2em;
  font-size: 1rem;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
}
.btn-detalhes button       { background: #007bff; color: #fff; border: none; }
.btn-approve               { background: #28a745; color: #fff; border: none; }
.back-link {
  border: 1px solid #333;
  color: #333;
}
.btn-detalhes button:hover,
.btn-approve:hover,
.back-link:hover {
  opacity: 0.9;
}

/* --------------------------------------------- */
/* Cards de Sensor e Novas Máquinas Pendentes */
.sensor-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0;
  /* remova qualquer max-width ou padding daqui */
}

.sensor-card {
  background: rgba(255,255,255,0.85);
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0.75rem;
  box-sizing: border-box;

  /* define flex para 4 colunas com gap de 1rem */
  flex: 0 1 calc(25% - 1rem);
  max-width: 240px;    /* opcional, evita esticar demais */

  display: flex;
  flex-direction: column;
  align-items: center; /* centra horizontalmente todo o conteúdo */
  text-align: center;  /* texto centralizado */
  transition: box-shadow .2s;
  cursor: pointer;
}
.sensor-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.sensor-card.pending {
  opacity: 0.6;
}

/* compacta os <p> dentro do card */
.sensor-card p {
  margin: 0.25em 0;
  line-height: 1.2;
  font-size: 0.9rem;
}

/* Remove underline e herda a cor para links dentro de .sensor-card */
.sensor-card a,
.sensor-card a:visited {
  text-decoration: none;
  color: inherit;
}

.sensor-card a,
.sensor-card a:visited,
.sensor-card a:hover,
.sensor-card a:focus {
  text-decoration: none;
  color: inherit;
}

/* Remove sublinhado e cor de link (incluindo :visited) nos cards */
a.sensor-card,
a.sensor-card:link,
a.sensor-card:visited,
a.sensor-card:hover,
a.sensor-card:focus,
a.sensor-card:active {
  text-decoration: none !important;
  color: inherit !important;
}

/* título do card */
.sensor-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

/* badges e small centralizados */
.sensor-card small,
.badge-pending,
.badge-approved {
  display: block;
  margin: 0.5rem auto 0;
  font-size: 0.8rem;
  text-align: center;
}

/* ============================================= */
/* Badges de status */
.badge-pending,
.badge-approved {
  display: inline-block;       /* para respeitar padding/border-radius */
  text-decoration: none;       /* tira o sublinhado caso seja <a> */
  font-weight: bold;           /* opcional, deixa o texto mais destacado */
  padding:      0.2em 0.5em;
  border-radius: 4px;
  color:        #fff;          
}

.badge-pending  { background: #ffc107; }
.badge-approved { background: #28a745; }


/* ============================================= */
/* Tabelas */
.table-container {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}
table {
  border-collapse: collapse;
  width: auto;
}
th, td {
  padding: 0.5em 1em;
  border: 1px solid #ccc;
  text-align: center;
}
th {
  background: #f4f4f4;
}

/* ============================================= */
/* Pequenos ajustes finais */
footer {
  margin-top: 2rem;
  font-size: 0.8em;
  color: #666;
  text-align: center;
}