.modal {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fundo semi-transparente */
    overflow: auto; /* Ativa rolagem caso o modal exceda a tela */
    z-index: 99;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; /* Ocupa 90% da largura da tela */
    max-width: 800px; /* Largura máxima do modal */
    height: auto;
    max-height: 95vh; /* Limita altura total do modal a 80% da altura da tela */
    background-color: lightgray; /* Fundo branco para contraste */
    border-radius: 0.5rem; /* Bordas arredondadas */
    display: flex;
    flex-direction: column; /* Layout em coluna: header, body, footer */
    overflow: hidden; /* Impede que o conteúdo saia do modal */
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--secondary); /* Use a variável de cor definida */
    color: var(--text-dark); /* Cor do texto */
    padding: 1rem; /* Espaçamento interno */
    min-height: 10vh; /* Altura mínima */
    max-height: 15vh; /* Altura máxima para conteúdo dinâmico */
    overflow: auto; /* Ativa rolagem se o conteúdo for muito grande */
}

.modal-header .modal-icon {
    font-size: 1.5rem; /* Tamanho do ícone */
    width: 10%; /* Largura do ícone */
    text-align: center; /* Centraliza o ícone */
}

.modal-header .modal-title {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    flex: 1; /* Centraliza o título */
    width: 80%; /* Limita a largura do título */
}

.modal-header .x-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-dark); /* Cor do botão fechar */
    cursor: pointer;
    width: 10%; /* Largura do botão */
    transition: all 0.3s ease; /* Transição suave para o hover */
}

.modal-header .x-button:hover {
    color: #ac0d1d; /* Vermelho no hover */
    transform: scale(1.2); /* Aumenta ligeiramente o tamanho no hover */
}

.modal-body {
    display: flex;
    flex-direction: column; /* Layout em coluna */
    flex: 1; /* O body ocupa o restante do espaço disponível */
    padding: 1rem;
    overflow-y: auto; /* Ativa rolagem vertical se necessário */
    margin: 0 0.5rem;
    background-color: var(--secondary);
    border-top: 1px solid var(--border); /* Linha divisória superior */
    border-bottom: 1px solid var(--border); /* Linha divisória inferior */
    gap: 0.5rem;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-evenly; /* Espaçamento igual entre os botões */
    background-color: var(--secondary);
    padding: 1rem; /* Espaçamento interno */
    min-height: 10vh; /* Altura mínima */
    max-height: 15vh; /* Altura máxima para conteúdo dinâmico */
}

.modal-footer .modal-button {
    min-width: 20%; /* Largura mínima dos botões */
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border: none;
    border-radius: 0.25rem; /* Bordas arredondadas */
    cursor: pointer;
    transition: all 0.3s ease; /* Transição suave para o hover */
}

.modal-body p {
    margin: auto;
}

.form-group {
    display: flex;
    align-items: center; /* Centraliza os elementos verticalmente */
    gap: 0.5rem; /* Adiciona espaçamento entre o label e o input */
}


.form-group label {
    font-size: 1rem;
    flex: 1;
    text-align: right;
    color: var(--text-dark);
    background: none;
    border: none;
}

.form-group input,
.form-group select {
    font-size: 1rem;
    flex: 2;
    color: var(--text-dark);
}

/* Controle de Usuários */

.form-group #username:focus {
    background-color: var(--form-control);
    border: 0.1rem solid var(--border);
    color: var(--text);
}

/* Buffer e Torre de Controle da Electrolux */

.reject-reason {
    display: flex;
    align-items: center;
    margin: 0.3rem auto;
    width: 35%;
    text-align: left;
    white-space: nowrap;
}

.reject-reason label {
    font-size: 1rem;
    background: none;
    border: none;
    color: var(--text-dark);
}

/* Painel de Eventos */

#taskModalBody * {
    font-size: 1rem;
}



#taskModalBody label {
    background: none;
    border: none;
    color: var(--text-dark);
    white-space: nowrap;
}

#taskOptions {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 70%;
    margin: auto;
    gap: 0.5rem;
}

#logModalBody {
    display: block;
}

#eventArriveDate {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    padding-top: 1rem;
}

.modal-footer * {
    font-size: 1rem;
}

.modal-button {
    min-width: 25%;
}

#eventArriveDate {
  display: none;
}

#logTableBody td {
    white-space: normal !important;
    word-break: break-word;
    vertical-align: top;
}

#logTableBody td:nth-child(4) {
    max-width: 400px;
}

#logTableContainer {
  overflow-x: auto;
  max-width: 100%;
}

#logTable {
  width: 100%;
  min-width: 65rem;
}

.log-row td {
  padding: 1rem 0.75rem;
  vertical-align: top;
}

.log-row td:nth-child(1) {
  min-width: 8rem;
  width: 15%;
}

.log-row td:nth-child(2) {
  min-width: 10rem;
  width: 20%;
}

.log-row td:nth-child(3) {
  min-width: 12rem;
  width: 25%;
}

.log-row td:nth-child(4) {
  min-width: 20rem;
  width: 40%;
  max-width: 40rem;
}

@media (max-width: 768px) {
  #logTable {
    min-width: 50rem;
  }

  .log-row td:nth-child(1) { min-width: 6rem; }
  .log-row td:nth-child(2) { min-width: 8rem; }
  .log-row td:nth-child(3) { min-width: 10rem; }
  .log-row td:nth-child(4) { min-width: 16rem; }
}

@media (max-width: 480px) {
  #logTable {
    min-width: 40rem;
  }

  .log-row td {
    padding: 0.75rem 0.5rem;
    font-size: 0.9rem;
  }

  .log-row td:nth-child(1) { min-width: 5rem; }
  .log-row td:nth-child(2) { min-width: 7rem; }
  .log-row td:nth-child(3) { min-width: 8rem; }
  .log-row td:nth-child(4) { min-width: 12rem; }
}

/* Estilo responsivo para telas menores */
@media (max-width: 768px) {
    .modal-content {
        width: 95%; /* O modal ocupa quase toda a largura */
        max-height: 85vh; /* Limite maior para telas pequenas */
    }

    .modal-header,
    .modal-footer {
        padding: 0.5rem; /* Reduz o espaçamento */
    }

    .modal-footer .modal-button {
        min-width: 30%; /* Botões maiores em telas menores */
    }
}