body {
    /* Define a fonte 'Inter' como padrão para uma aparência consistente. */
    font-family: 'Inter', sans-serif;
}

/* Estilos para o cartão de requisição na página de visualização. */
.requisition-card {
    /* Adiciona uma transição suave para efeitos de expansão/contração. */
    transition: all 0.3s ease;
}

/* Esconde os detalhes do cartão de requisição por padrão. */
.requisition-card .details {
    max-height: 0; /* Altura inicial zero para ocultar o conteúdo. */
    overflow: hidden; /* Garante que o conteúdo oculto não transborde. */
    /* Transição suave para a altura máxima quando o cartão é expandido. */
    transition: max-height 0.5s ease-in-out;
}

/* Quando o cartão tem a classe 'open', os detalhes são exibidos. */
.requisition-card.open .details {
    max-height: 1000px; /* Define uma altura máxima grande o suficiente para mostrar todo o conteúdo. */
}

/* Estilos para o menu de ações "..." em cada cartão de requisição. */
.action-menu {
    position: relative; /* Essencial para posicionar o dropdown-content. */
    display: inline-block; /* Permite que o elemento se ajuste ao conteúdo. */
    z-index: 10; /* Z-index para o menu de ação e seu dropdown */
}

/* Estilos para o conteúdo do dropdown (o menu que aparece). */
.dropdown-content {
    display: none; /* Escondido por padrão, será mostrado via JavaScript. */
    position: absolute; /* Posiciona o dropdown relativo ao .action-menu. */
    right: 0; /* Alinha o dropdown à direita do botão. */
    background-color: #f9f9f9; /* Cor de fundo clara. */
    min-width: 160px; /* Largura mínima do dropdown. */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Sombra para destaque. */
    z-index: 20; /* Z-index do dropdown. Deve ser maior que o do card, mas menor que o do modal. */
    border-radius: 8px; /* Cantos arredondados. */
    overflow: hidden; /* Garante que os itens internos respeitem o border-radius. */
}

/* Estilos para os links e botões dentro do dropdown. */
.dropdown-content a, .dropdown-content button {
    color: black; /* Cor do texto. */
    padding: 12px 16px; /* Espaçamento interno. */
    text-decoration: none; /* Remove sublinhado de links. */
    display: block; /* Ocupa a largura total disponível. */
    width: 100%; /* Garante que o clique seja na largura total. */
    text-align: left; /* Alinha o texto à esquerda. */
    border: none; /* Remove borda de botões. */
    background: none; /* Remove fundo de botões. */
    cursor: pointer; /* Muda o cursor para indicar que é clicável. */
}

/* Efeito hover para os itens do dropdown. */
.dropdown-content a:hover, .dropdown-content button:hover {
    background-color: #ddd; /* Cor de fundo ao passar o mouse. */
}

/* Classe JavaScript para exibir o dropdown. */
.show-dropdown {
    display: block; /* Torna o dropdown visível. */
}

/* Estilos para o modal de mensagens e confirmação */
.modal {
    /* Transição suave para aparecer/desaparecer */
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    background-color: rgba(0, 0, 0, 0.75); /* Fundo semi-transparente escuro */
    position: fixed; /* Fixa o modal na tela */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex; /* Centraliza o conteúdo do modal */
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Z-index MUITO ALTO para garantir que fique por cima de tudo */
}
.modal-content {
    background-color: #fff; /* Fundo branco */
    padding: 2.5rem; /* Espaçamento interno (p-10 do Tailwind) */
    border-radius: 0.75rem; /* Cantos arredondados (rounded-lg do Tailwind) */
    /* Sombra profunda para destaque */
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* shadow-xl do Tailwind */
    text-align: center; /* Centraliza o texto */
    width: 100%; /* Largura total */
    max-width: 28rem; /* Largura máxima (max-w-sm do Tailwind) */
    margin: 0 1rem; /* Margem horizontal automática (mx-4 do Tailwind) */
    position: relative; /* Para posicionar o botão de fechar */
}
.close-button {
    position: absolute;
    top: 0.5rem; /* 0.5rem do topo */
    right: 1rem; /* 1rem da direita */
    font-size: 2rem; /* Tamanho da fonte grande */
    cursor: pointer;
    color: #4b5563; /* Cor cinza padrão */
}
.close-button:hover {
    color: #1f2937; /* Cor cinza mais escura ao passar o mouse */
}