.django-messages {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.django-messages .msg {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 14px;
}

/* Tipos de mensagem acasdasd do Django */
.django-messages .success {
    background: #e6f9f0;
    color: #0f5132;
    border-left: 5px solid #198754;
}

.django-messages .error {
    background: #fdecea;
    color: #842029;
    border-left: 5px solid #dc3545;
}

.django-messages .warning {
    background: #fff4e5;
    color: #664d03;
    border-left: 5px solid #ffc107;
}

.django-messages .info {
    background: #e7f3ff;
    color: #084298;
    border-left: 5px solid #0d6efd;
}


/* ================ 🛒 ANIMAÇÃO DO CARRINHO ================ */
@keyframes puloDoCarrinho {
    0% { transform: scale(1); }
    30% { transform: scale(1.3) rotate(-15deg); background-color: #10b981; } /* Cresce e fica Verde */
    50% { transform: scale(1.1) rotate(10deg); background-color: #10b981; }
    70% { transform: scale(1.2) rotate(-5deg); background-color: #10b981; }
    100% { transform: scale(1) rotate(0); background-color: #285ae3; } /* Volta ao Azul original */
}

.animar-carrinho {
    animation: puloDoCarrinho 0.8s ease-in-out !important;
}

    
/* Botão editar */
.btn-eeditar {
    display: inline-block;
    padding: 5px 12px;
    background-color: #0f9cca; /* verde */
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    transition: background-color 0.2s;
}

.btn-eeditar:hover {
    background-color: #23acd9;
}




.floating-add-button {
    position: fixed;
    bottom: 20px;      /* distância do rodapé */
    right: 20px;       /* distância da lateral direita */
    width: 60px;       /* largura do botão */
    height: 60px;      /* altura do botão */
    background-color: #007bff;  /* cor do botão */
    color: white;      /* cor do "+" */
    border-radius: 50%; /* deixa redondo */
    text-align: center;
    line-height: 60px;  /* centraliza o "+" verticalmente */
    font-size: 30px;    /* tamanho do "+" */
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: background-color 0.3s;
    z-index: 1000;
}

.floating-add-button:hover {
    background-color: #0056b3; /* muda cor ao passar o mouse */
}





/* Estilos para paginação */
.pagination {
    display: flex;
    justify-content: center; /* centraliza os botões */
    align-items: center;
    margin-top: 25px;
    gap: 10px;
    flex-wrap: wrap;
}

.pagination a, 
.pagination span {
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination a {
    background-color: #0f9cca;
    color: #fff;
}

.pagination a:hover {
    background-color: #23acd9;
}

.pagination span {
    background-color: #f0f0f0;
    color: #333;
}


/*Cor do link*/

.sortable-link {
    color: #0f9cca; /* cor azul */
    text-decoration: none; /* remove underline */
}

.sortable-link:hover {
    color: #23acd9; /* cor ao passar o mouse */
}





/*Cards de funcionários*/


.dashboard-cards {
    display: flex;
    
    flex-wrap: wrap;
    gap: 20px;

}

.card {
    display: flex;
    flex-direction: column; /* mantém h2 em cima, p abaixo */
    justify-content: center; /* centraliza verticalmente */
    align-items: center;     /* centraliza horizontalmente */
    background-color: #2ebb59;
    color: #ffffff; /* <- adiciona a cor da fonte */
    padding: 20px;
    
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    flex: 1 1 200px; /* cresce e encolhe conforme espaço */
    min-width: 200px;
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-5px);
}

.card h2 {
    font-size: 1.1em;
    color: #ffffff; /* <- adiciona a cor da fonte */
    margin-bottom: 10px;
}

.card p {
    font-size: 2em;
    color: #ffffff; /* <- adiciona a cor da fonte */
    margin: 0;
}





/* Potly grapch */

.dashboard-graph {
    width: 100%;
    
    height: 1000px; /* ou usar vh para mobile */
    /*margem no top*/
    margin-top: 20px;
}


/* Estilos do botão padrão */
button {
    margin-top: 25px;
    background-color: #3b82f6;
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

button:hover {
    background-color: #2563eb;
}