/* =====================================================
   33_modals_eventos.css
   - Este ficheiro deve estilizar APENAS:
     #modalEventos (lista de eventos)
     #modalAlertas / #modalTodosEventos (tabelas semelhantes)
   - NÃO deve conter estilos para #modalEvento (evento singular).
     O evento singular é 100% controlado pelo 53_modal_evento.css
   ===================================================== */

/* =====================================================
   MODAL: LISTA DE EVENTOS  (#modalEventos)
   ===================================================== */

#modalEventos .modal-content.modal-eventos{
  max-width: 700px;
}

#modalEventos .eventos-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}

#modalEventos .eventos-titlebar{
  flex: 1;
  text-align:center;
  background:#4c654f;
  color:#fff;
  padding: 16px 16px;
  font-size: 26px;
  letter-spacing: 1px;
}

#modalEventos .eventos-head{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: end;
  margin: 10px 0 8px;
}

#modalEventos .eventos-proc-label{
  background:#fff;
  padding: 10px;
  text-align:center;
  border: 0px solid rgba(0,0,0,.25);
}

#modalEventos .eventos-proc-value{
  background:#eee;
  padding: 14px;
  text-align:center;
  border: 1px solid rgba(0,0,0,.25);
}

#modalEventos .eventos-btn-new{
  width: 100%;
  height: 46px;
  border-radius: 16px;
  border: 2px solid rgba(0,0,0,.25);
  background:#ddd;
  font-size: 20px;
  font-weight: 500;
  cursor:pointer;
}

#modalEventos .eventos-hint{
  text-align:center;
  margin: 10px 0 14px;
}

#modalEventos .eventos-table-wrap{
  border: 1px solid rgba(0,0,0,.25);
  background:#fff;
}

#modalEventos .eventos-table{
  width:100%;
  border-collapse: collapse;
}

#modalEventos .eventos-table th,
#modalEventos .eventos-table td{
  border: 1px solid rgba(0,0,0,.25);
  padding: 10px 12px;
  text-align:left;
}

#modalEventos .eventos-table th{
  background:#7e9c7a;
  color:#000;
  font-weight: 600;
}

#modalEventos .eventos-row{ cursor:pointer; }
#modalEventos .eventos-row:hover{ background: rgba(126,156,122,.14); }

/* Mobile: esconder Situação */
@media (max-width: 768px){
  #modalEventos .eventos-head{ grid-template-columns: 1fr; }
  #modalEventos .eventos-btn-new{ font-size: 20px; height: 50px; }
  #modalEventos .eventos-titlebar{ font-size: 26px; }
  #modalEventos .modal-content.modal-eventos{ max-width: 560px; }

  #modalEventos .eventos-table th:nth-child(3),
  #modalEventos .eventos-table td:nth-child(3){
    display:none;
  }
}

/* =====================================================
   ALERTAS — garantir botão clicável
   ===================================================== */

#modalAlertas .alerta-open-event{
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;

  font: inherit;
  color: #193366;
  font-weight: 600;

  text-decoration: underline;
  cursor: pointer;

  pointer-events: auto;
  display: inline;
}

#modalAlertas td{
  pointer-events: auto;
}

/* =====================================================
   MOBILE — Modal EVENTOS permitir scroll confortável
   (mantido porque era útil)
   ===================================================== */
@media (max-width: 768px){

  #modalEventos{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #modalEventos .modal-content.modal-eventos{
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #modalEventos .eventos-table-wrap{
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* =====================================================
   EVENTOS — adicionar caixa "Utilizador" (header 3 colunas)
   ===================================================== */

#modalEventos .eventos-head{
  grid-template-columns: 1fr 1fr 170px; /* Utilizador | Processo | Botão */
  gap: 18px;
}

#modalEventos .eventos-user-label{
  background:#fff;
  padding: 10px;
  text-align:center;
  border: 0px solid rgba(0,0,0,.25);
}

#modalEventos .eventos-user-value{
  background:#eee;
  padding: 14px;
  text-align:center;
  border: 1px solid rgba(0,0,0,.25);
}

/* Mobile: 1 coluna */
@media (max-width: 768px){
  #modalEventos .eventos-head{
    grid-template-columns: 1fr;
  }
}