/* Definição de variáveis para cores */
:root {
    /* Color button primary */
    --primary-color: #fd894a; /* Azul claro */
    --secondary-color: #db5a14; /* Azul escuro */
    --hover-primary-color: #ff7226; /* Azul claro para hover */
    --hover-secondary-color: #a54918; /* Azul escuro para hover */
    --text-color: #ffffff; /* Branco */
    --focus-color: rgba(246, 134, 59, 0.5); /* Azul translúcido para foco */

    /* Color button create */
    --create-color: #22c55e; /* Verde claro */
    --create-hover-color: #16a34a; /* Verde escuro */
    --create-focus-color: rgba(34, 197, 94, 0.5); /* Verde translúcido para foco */

    /* cores tabela */
    --table-header-bg: #2D3748; /* Fundo cinza escuro para cabeçalho da tabela */
    --table-header-text: #ffffff; /* Cor do texto no cabeçalho da tabela */
    --table-row-bg: #4A5568; /* Fundo claro para linhas da tabela */
    --table-row-hover-bg: #3f4f65; /* Fundo mais escuro no hover */
    --table-border: #767f8c; /* Cor da borda da tabela */
}

/* Estilo para botão primário */
.button-primary {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    color: var(--text-color);
    border-radius: 0.5rem;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease-in-out, box-shadow 0.2s ease-in-out; /* Transição suave apenas para fundo e sombra */
}

.button-primary:hover {
    background: linear-gradient(to right, var(--hover-primary-color), var(--hover-secondary-color));
}

.button-primary:focus {
    outline: none; /* Remove o contorno padrão */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Sombra sutil ao focar */
}

.button-primary:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Sombra sutil ao clicar */
    transform: translateY(1px); /* Leve efeito de pressionado */
}
/* FIM Estilo para botão primário */
/* INICIO Estilo para botão secundario */
.button-secondary {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, #4caf50, #388e3c);
    color: var(--text-color);
    border-radius: 0.5rem;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease-in-out, box-shadow 0.2s ease-in-out;
}

.button-secondary:hover {
    background: linear-gradient(to right, #66bb6a, #43a047);
}

.button-secondary:focus {
    outline: none;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.3); /* Sombra sutil com tonalidade verde ao focar */
}

.button-secondary:active {
    box-shadow: 0 2px 4px rgba(0, 128, 0, 0.3); /* Sombra sutil ao clicar */
    transform: translateY(1px);
}
/* FIM Estilo para botão secundario */

/* INICIO Estilo para botão primário estatico */
.button-primary-static {
    display: inline-block; /* Use inline-block para respeitar o tamanho do conteúdo */
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    color: var(--text-color);
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease-in-out, box-shadow 0.2s ease-in-out; /* Mantém a transição */
}

.button-primary-static:hover {
    background: linear-gradient(to right, var(--hover-primary-color), var(--hover-secondary-color));
}

.button-primary-static:focus {
    outline: none; /* Remove o contorno padrão */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Sombra sutil ao focar */
}
/* FIM Estilo para botão primário estatico */

/* INICIO Estilo para botão secindario estatico */
.button-secondary-static {
    display: inline-block; /* Respeita o tamanho do conteúdo */
    background: linear-gradient(to right, #4caf50, #388e3c); /* Gradiente original */
    color: var(--text-color);
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease-in-out, box-shadow 0.2s ease-in-out; /* Mantém a transição */
}

.button-secondary-static:hover {
    background: linear-gradient(to right, #66bb6a, #43a047); /* Gradiente ao passar o mouse */
}

.button-secondary-static:focus {
    outline: none;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.3); /* Sombra verde ao focar */
}

.button-secondary-static:active {
    box-shadow: 0 2px 4px rgba(0, 128, 0, 0.3); /* Sombra ao clicar */
    transform: none; /* Remove o deslocamento vertical */
}

/* FIM Estilo para botão secindario estatico */
.button-save{
    background-color: blue;
}

/* Estilo para botão create */
.button-create {
    display: inline-block; /* Botão com largura automática */
    padding: 0.25rem 0.75rem; /* py-1 px-3 */
    background-color: var(--create-color); /* Fundo verde */
    color: var(--text-color); /* Texto branco */
    border-radius: 0.25rem; /* Bordas levemente arredondadas */
    text-align: center;
    font-weight: bold; /* Texto em destaque */
    cursor: pointer;
    transition: background-color 0.3s ease-in-out; /* Transição suave */
    border: none; /* Remove bordas padrão */
}

.button-create:hover {
    background-color: var(--create-hover-color); /* Fundo verde escuro no hover */
}

.button-create:focus {
    outline: none; /* Remove o contorno padrão */
    box-shadow: 0 0 0 4px var(--create-focus-color); /* Sombra para foco */
}

/* FIM Estilo para botão create */

/* Estilo para botão del */
.button-del-static {
    display: inline-block; /* Respeita o tamanho do conteúdo */
    background: linear-gradient(to right, #f44336, #d32f2f); /* Gradiente vermelho */
    color: var(--text-color);
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease-in-out, box-shadow 0.2s ease-in-out; /* Mantém a transição */
}

.button-del-static:hover {
    background: linear-gradient(to right, #e25454, #c62828); /* Gradiente ao passar o mouse */
}

.button-del-static:focus {
    outline: none;
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.3); /* Sombra vermelha ao focar */
}

.button-del-static:active {
    box-shadow: 0 2px 4px rgba(128, 0, 0, 0.3); /* Sombra ao clicar */
    transform: none; /* Remove o deslocamento vertical */
}
/* Fim Estilo para botão del */

/* Estilo para botão edit */
.button-edit {
    display: inline-block; /* Respeita o tamanho do conteúdo */
    background: linear-gradient(to right, #2196f3, #1976d2); /* Gradiente azul */
    color: var(--text-color);
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease-in-out, box-shadow 0.2s ease-in-out; /* Mantém a transição */
}

.button-edit:hover {
    background: linear-gradient(to right, #42a5f5, #1565c0); /* Gradiente ao passar o mouse */
}

.button-edit:focus {
    outline: none;
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.3); /* Sombra azul ao focar */
}

.button-edit:active {
    box-shadow: 0 2px 4px rgba(0, 0, 128, 0.3); /* Sombra ao clicar */
    transform: none; /* Remove o deslocamento vertical */
}
/* Fim Estilo para botão edit */



/* Desabilitado */
.button-edit:disabled,
.button-primary-static:disabled,
.button-secondary-static:disabled,
.button-del-static:disabled {
    background: linear-gradient(to right, #bdbdbd, #9e9e9e);
    color: #ffffff;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.6;
}
/* FIM Desabilitado */



/* Estilo pra tabela */
.table {
    width: 100%;
    border-collapse: collapse; /* Remove espaçamento entre bordas */
    margin-top: 1.5rem;
    /* Bordas arredondadas para toda a tabela */
    overflow: hidden; /* Garante que bordas arredondadas funcionem */
    border-radius: 0.4rem;
}

.table th {
    background-color: var(--table-header-bg); /* Fundo do cabeçalho */
    color: var(--table-header-text); /* Cor do texto do cabeçalho */
    padding: 0.75rem; /* Espaçamento interno */
    text-align: center; /* Alinhamento do texto */



}

.table thead{
    border-radius: 0.2rem;
}

.table td {
    background-color: var(--table-row-bg); /* Fundo das células */
    padding: 0.75rem; /* Espaçamento interno */
    border-right: 1px solid var(--table-border);
}

.table tr:hover td {
    background-color: var(--table-row-hover-bg); /* Fundo no hover */
}

.table-actions {
    display: flex;
    gap: 0.8rem; /* Reduz espaçamento entre ícones */
    justify-content: center;
    align-items: center;

}

.table-actions a {
    color: inherit; /* Cor do texto herdada */
    transition: color 0.3s ease-in-out; /* Transição suave */
}

.table-actions a:hover {
    color: #e9de14; /* Azul escuro no hover */
}

.table-actions button {
    background: none; /* Remove fundo */
    border: none; /* Remove bordas */
    color: inherit; /* Cor do texto herdada */
    cursor: pointer;
    transition: color 0.3s ease-in-out; /* Transição suave */
}

.table-actions button:hover {
    color: #EF4444; /* Vermelho escuro no hover */
}
/* FIM Estilo pra tabela */

.color-header{
    /* background: linear-gradient(to right, var(--primary-color), #42a5f5) !important; */
    background-color: #E6772C !important;
    /* background-color: #436077 !important; */
}
.color-header .links {
    color: white ;
}
.button-save{
    background-color: blue;
}

.color-navbar{
    background-color: rgb(238, 238, 240);
}

.color-black{
    color: black;
}

/* Estilo para o campo de seleção do Select2 */
.select2-container .select2-selection.custom-selection {
    width: 100%;
    border-radius: 0.375rem; /* Equivalente a rounded-md */
    border: 1px solid #374151; /* Cor similar a border-gray-700 (preto) */
    background-color: #ffffff !important; /* Fundo branco, com !important para garantir prioridade */
    color: #000000 !important; /* Texto preto, com !important para garantir prioridade */
    height: 2.5rem !important; /* Altura ajustada para combinar com o input de data */
    padding: 0.5rem; /* Espaçamento interno */
    display: flex;
    align-items: center;
    box-sizing: border-box;
    font-size: 0.875rem; /* Texto equivalente a text-sm */
}

/* Estilo para o dropdown do Select2 */
.select2-container .select2-dropdown.custom-dropdown {
    background-color: #ffffff !important; /* Fundo branco do dropdown */
    color: #000000 !important; /* Texto preto */
    border: 1px solid #374151 !important; /* Borda preta para o dropdown */
    border-radius: 0.375rem !important; /* Bordas arredondadas */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; /* Sombra leve */
}

/* Opções no dropdown */
.select2-container .select2-results__option {
    padding: 0.5rem 1rem; /* Espaçamento interno das opções */
    cursor: pointer;
    font-size: 0.875rem; /* Texto equivalente a text-sm */
    background-color: #ffffff !important; /* Fundo branco */
    color: #000000 !important; /* Texto preto */
}

/* Opção em hover no dropdown */
.select2-container .select2-results__option:hover {
    background-color: #e5e7eb !important; /* Fundo cinza claro do Tailwind no hover */
    color: #000000 !important; /* Texto preto */
}

/* Opção selecionada no dropdown */
.select2-container .select2-results__option--highlighted {
    background-color: #e5e7eb !important; /* Fundo cinza claro */
    color: #000000 !important; /* Texto preto */
}

/* Ícone do Select2 */
.select2-container .select2-selection__arrow b {
    border-color: #374151 transparent transparent transparent !important; /* Cor do ícone ajustada */
    border-width: 5px;
}

/* Remover o ícone padrão do Select2 */
.select2-container .select2-selection__arrow {
    display: none; /* Esconde o ícone padrão */
}

/* Adicionar a seta personalizada no estilo Tailwind */
.select2-container .select2-selection {
    position: relative; /* Necessário para posicionar o ícone */
}

.select2-container .select2-selection::after {
    content: ''; /* Deixa vazio para inserir um SVG */
    position: absolute;
    right: 10px; /* Ajusta a posição horizontal */
    top: 50%;
    transform: translateY(-50%); /* Centraliza verticalmente */
    width: 1rem; /* Largura da seta */
    height: 1rem; /* Altura da seta */
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>') no-repeat center;
    background-size: contain;
    color: #374151; /* Cor semelhante à seta padrão */
    pointer-events: none; /* Garante que a seta não interfira na interação */
}

.select2-container--disabled .select2-selection--single.custom-selection {
    background-color: #f3f4f6 !important; /* Fundo cinza claro */
    color: #6b7280 !important;             /* Texto cinza médio */
    cursor: not-allowed !important;
    opacity: 1 !important;                /* Garante legibilidade */
    border-color: #d1d5db !important;     /* Borda cinza */
}

/* Evita exibir a seta interativa no estado desabilitado */
.select2-container--disabled .select2-selection--single::after {
    display: none;
}

input[readonly],
textarea[readonly] {
    background-color: #f3f4f6; /* Cinza claro (tailwind: gray-100) */
    color: #6b7280;            /* Cinza médio para o texto (tailwind: gray-500) */
    cursor: not-allowed;
    opacity: 1; /* Para manter legibilidade */
}