/* FlowEmpresas - Custom Styles */

:root {
    --primary: #4D3828;
    /* Orgânica */
    --primary-dark: #2D2018;
    /* Orgânica Dark */
    --secondary: #A98C3E;
    /* Ouro */
    --success: #5F7534;
    /* Musgo */
    --warning: #E8C65C;
    /* Gema */
    --danger: #944721;
    /* Terra */
}

/* ... existing styles ... */

.badge-primary {
    background-color: rgba(77, 56, 40, 0.1);
    /* Primary/10 */
    color: var(--primary);
}

.badge-success {
    background-color: rgba(95, 117, 52, 0.1);
    /* Success/10 */
    color: var(--success);
}

.badge-warning {
    background-color: rgba(232, 198, 92, 0.1);
    /* Warning/10 */
    color: #A98C3E;
    /* Darker yellow/gold for text */
}

.badge-danger {
    background-color: rgba(148, 71, 33, 0.1);
    /* Danger/10 */
    color: var(--danger);
}

.badge-menta {
    background-color: rgba(129, 150, 90, 0.2);
    /* Menta/20 */
    color: var(--primary);
    /* Brown text for contrast, or Musgo? Let's use Primary (Orgânica) as requested for general text, or Musgo for green theme. User said "sombreamento tb pode ser neste mesmo verde". Let's stick to Menta BG. Text Primary looks classy. */
}

* {
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Smooth transitions */
.nav-item.active {
    color: var(--primary);
    background-color: rgba(129, 150, 90, 0.2);
    /* Menta/20 */
}

/* Card animations */
.card-enter {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Floating Action Button */
.fab {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    z-index: 40;
}

.fab:hover {
    background-color: var(--primary-dark);
    transform: scale(1.1);
}

.fab:active {
    transform: scale(0.95);
}

/* Toast styles */
.toast {
    min-width: 250px;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast.success {
    background-color: var(--success);
    color: white;
}

.toast.error {
    background-color: var(--danger);
    color: white;
}

.toast.warning {
    background-color: var(--warning);
    color: white;
}

.toast.info {
    background-color: var(--secondary);
    color: white;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Checkbox custom */
input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

/* Badge styles */
.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
}

.badge-primary {
    background-color: #EEF2FF;
    color: var(--primary);
}

.badge-success {
    background-color: #D1FAE5;
    color: #065F46;
}

.badge-warning {
    background-color: #FEF3C7;
    color: #92400E;
}

.badge-danger {
    background-color: #FEE2E2;
    color: #991B1B;
}

/* Loading spinner */
.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Modal backdrop */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

/* Responsive utilities */
@media (min-width: 768px) {
    #bottom-nav {
        display: none !important;
    }

    body {
        padding-bottom: 0 !important;
    }

    .fab {
        bottom: 20px;
    }
}
/* New Animations for Modals */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fadeInUp 0.3s ease-out forwards;
}

@keyframes popIn {
    0% { opacity: 0; transform: scale(0.9); }
    80% { transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1); }
}
.animate-bounce-soft {
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}