/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #0083c8 0%, #005d95 100%);
  min-height: 100vh;
  color: #fff;
  padding: 30px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* LOGIN */
#login-container {
  background-color: rgba(0, 93, 149, 0.85);
  padding: 30px 40px;
  border-radius: 12px;
  box-shadow: 0 8px 15px rgba(0,0,0,0.3);
  text-align: center;
  display: none; 
}

#login-container.active {
  display: block;
}

#login-container h1 {
  margin-bottom: 20px;
  color: #fff;
}

#login-container label {
  display: block;
  margin: 10px 0 5px;
  font-weight: bold;
  color: #fff;
}

#login-container input {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: none;
  margin-bottom: 15px;
  font-size: 1rem;
  color: #222;
}

#login-container button {
  background-color: #c2db00;
  color: #005d95;
  font-weight: bold;
  padding: 10px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
}

#login-container button:hover {
  background-color: #a0b300;
}

#login-container .error {
  color: #ff4d4d;
  margin-top: 10px;
  font-size: 0.9rem;
}

/* Botão de logout */
.logout-btn {
  background-color: #db0000;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 15px;
  cursor: pointer;
  margin-bottom: 20px;
}

.logout-btn:hover {
  background-color: #a80000;
}

/* Títulos */
h1 {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}

h2 {
  margin-top: 40px;
  margin-bottom: 20px;
  font-weight: 600;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

/* Tabs */
.tabs {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.tab-button {
  background-color: #005d95;
  border: none;
  padding: 10px 25px;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.tab-button.active,
.tab-button:hover {
  background-color: #c2db00;
  color: #005d95;
}

.tab-content {
  display: none;
  width: 100%;
  max-width: 900px;
}

.tab-content.active {
  display: block;
}

/* Container do formulário */
.form-container {
  background-color: rgba(0, 93, 149, 0.85); 
  padding: 25px 30px;
  border-radius: 12px;
  box-shadow: 0 8px 15px rgba(0,0,0,0.25);
  width: 380px;
  max-width: 100%;
}

/* Labels */
label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #fff;
  font-size: 0.9rem;
}

/* Inputs e selects */
input[type="text"], select, input[type="date"], input[type="month"] { /* Adicionado input[type="month"] */
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 18px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition: box-shadow 0.3s ease;
  background-color: #eaf2a1;
  color: #222;
}

input[type="text"]:focus, select:focus, input[type="date"]:focus, input[type="month"]:focus { /* Adicionado input[type="month"] */
  box-shadow: 0 0 8px #c2db00;
  background-color: #fff;
}

/* Botão Salvar */
button#btnSalvar {
  background-color: #c2db00;
  color: #005d95;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 12px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.3s ease, color 0.3s ease;
  box-shadow: 0 6px 10px rgba(194,219,0,0.8);
}

button#btnSalvar:hover {
  background-color: #a0b300;
  color: #003e63;
  box-shadow: 0 8px 14px rgba(160,179,0,1);
}

/* Container dos filtros */
.filtros-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  margin-bottom: 20px;
  justify-content: center;
}

/* Cada grupo filtro + label */
.filtro-grupo {
  display: flex;
  flex-direction: column;
  min-width: 150px;
}

/* Label dos filtros */
.filtro-grupo label {
  font-weight: 600;
  margin-bottom: 5px;
  color: #fff;
}

/* Inputs e selects dos filtros */
.filtro-grupo select,
.filtro-grupo input[type="date"],
.filtro-grupo input[type="month"], 
.filtro-grupo input[type="text"] { 
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  background-color: #eaf2a1;
  color: #222;
  outline: none;
  font-weight: 600;
  transition: box-shadow 0.3s ease;
}

.filtros-container select:focus,
.filtros-container input[type="date"]:focus,
.filtros-container input[type="month"]:focus, 
.filtros-container input[type="text"]:focus { 
  box-shadow: 0 0 8px #c2db00;
  background-color: #fff;
}



#btnFiltrar,
#btnLimparFiltros,
#btn-gerar-pdf,
#btn-imprimir-selecionados { 
  background-color: #c2db00;
  color: #005d95;
  font-weight: 700;
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  white-space: nowrap; 
}

#btnFiltrar:hover,
#btnLimparFiltros:hover,
#btn-gerar-pdf:hover,
#btn-imprimir-selecionados:hover { 
  background-color: #a0b300;
}


#btn-imprimir-selecionados:disabled {
    background-color: 
    color: #666666;
    cursor: not-allowed; 
    opacity: 0.7; 
    box-shadow: none; 
}


.btn-selecao-multipla {
    background-color: #c2db00; /* Usei a cor verde de destaque */
    color: #005d95; 
    font-weight: 700;
    font-size: 0.65rem; 
    padding: 3px 5px; 
    border: none;
    border-radius: 4px; 
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    white-space: nowrap;
    margin-left: 8px; 
    margin-top: 0; /* Certifica que não tem margem superior indesejada */
    flex-shrink: 0;
    box-shadow: 0 0px 1px rgba(194, 219, 0, 0.15); 
}

.btn-selecao-multipla:hover {
    background-color: #a0b300; 
    box-shadow: 0 1px 2px rgba(160, 179, 0, 0.3); 
}

.btn-selecao-multipla.active {
    background-color: #005d95; /* Retorna ao azul quando ativo */
    color: #c2db00;
    box-shadow: 0 0px 1px rgba(0, 93, 149, 0.2);
}

.btn-selecao-multipla.active:hover {
    background-color: #003e63;
}


/* Painel de cartões */
.container {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 900px;
}

/* Cartões das máquinas */
.card {
  background: #005d95;
  color: #fff;
  border-radius: 14px;
  padding: 25px 20px; 
  width: 270px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
}

.card h3 {
  margin-bottom: 14px;
  font-size: 1.4rem;
  text-shadow: 1px 1px 3px #0008;
  color: #fff;
}

/* Status coloridos */
.status {
  font-weight: 700;
  font-size: 1rem;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: 20px;
  width: fit-content;
  user-select: none;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
  color: #fff;
}

.status.afazer {
  background-color: #db0000; 
  box-shadow: 0 0 10px #db0000aa;
}

.status.andamento {
  background-color: #db8b00; 
  box-shadow: 0 0 10px #db8b00aa;
}

.status.concluido {
  background-color: #c2db00; 
  color: #005d95;
  box-shadow: 0 0 10px #c2db00aa;
}

/* Dropdown para editar status 
.status-select {
  width: 100%;
  padding: 8px;
  margin-top: 6px;
  border-radius: 8px;
  font-size: 1rem;
  border: none;
  background-color: #eaf2a1;
  color: #222;
  font-weight: 600;
}

.status-select:focus {
  outline: none;
  box-shadow: 0 0 8px #c2db00;
}


.botoes-edicao {
  margin-top: 12px; 
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.botoes-edicao button {
  padding: 8px 14px;
  font-size: 0.9rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.botoes-edicao button:first-child {
  background-color: #c2db00; /* verde */
  color: #005d95;
}

.botoes-edicao button:first-child:hover {
  background-color: #a0b300;
}


#ranking {
  background-color: rgba(0, 93, 149, 0.85);
  border-radius: 12px;
  padding: 25px 30px;
  color: #fff;
  box-shadow: 0 8px 15px rgba(0,0,0,0.3);
  height: fit-content;
  font-weight: 600;
  user-select: none;
  max-width: 280px;
  margin-left: 10px;
}

#ranking h3 {
  margin-bottom: 15px;
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff;
}

#ranking ol {
  padding-left: 20px;
  margin: 0;
}

#ranking li {
  margin-bottom: 8px;
}


#rankingMensal {
  background-color: rgba(0, 93, 149, 0.85);
  border-radius: 12px;
  padding: 25px 30px;
  color: #fff;
  box-shadow: 0 8px 15px rgba(0,0,0,0.3);
  height: fit-content;
  font-weight: 600;
  user-select: none;
  max-width: 280px;
  margin-left: 10px;
  margin-top: 20px; /* espaçamento vertical entre rankings */
}

#rankingMensal h3 {
  margin-bottom: 15px;
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff;
}

#rankingMensal ol {
  padding-left: 20px;
  margin: 0;
}

#rankingMensal li {
  margin-bottom: 8px;
}


.sla-verde {
  border-left: 5px solid #28a745; 
}

.sla-amarelo {
  border-left: 5px solid #ffc107; 
}

.sla-vermelho {
  border-left: 5px solid #dc3545; 
}

.sla-timer {
  font-weight: bold;
  margin-top: 8px;
  font-size: 0.95rem;
  display: block;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

/* Paginação */
.paginacao {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 20px 0;
  user-select: none;
}
.paginacao button {
  background-color: #005d95;
  border: none;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
}
.paginacao button.ativa {
  background-color: #003f66;
}
.paginacao button.disabled {
  background-color: #999;
  cursor: default;
}

/* Responsivo */
@media(max-width: 900px) {
  #listaManutencoes {
    justify-content: center !important;
  }
  #ranking, #rankingMensal {
    max-width: 100% !important;
    margin-top: 20px !important;
    margin-left: 0 !important; 
  }
  .filtros-container {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .cadastro-container {
    flex-direction: column;
  }
    
    .cadastro-container .form-container > div {
        flex-direction: column; 
        align-items: flex-start; 
        width: 100%; 
    }
    .cadastro-container .form-container > div > div { /* A div que envolve label e select */
        width: 100%; 
    }
  .btn-selecao-multipla {
    margin-left: 0; /* Remove a margem lateral em telas menores */
    margin-top: 5px; /* Reduzido a margem superior no responsivo */
    width: 100%; /* Faz o botão ocupar a largura total */
    font-size: 0.75rem; /* Reduzido o tamanho da fonte no responsivo */
    padding: 4px 6px; /* Reduzido o preenchimento no responsivo */
  }
}

@media(max-width: 600px) {
  .form-container {
    width: 95%;
  }
  .card {
    width: 90%;
  }
  .filtros-container {
    justify-content: center;
    gap: 10px;
  }
  .filtro-grupo {
    min-width: 120px;
  }
}