/* ═══════════════════════════════════════════════════════════════
   FIX: TomSelect Dropdown Z-Index (Ficar atrás dos elementos)
   ═══════════════════════════════════════════════════════════════ */

/* Garantir que os dropdowns fiquem acima de tudo */
.ts-wrapper {
    position: relative;
    z-index: auto;
}

.ts-wrapper .ts-dropdown,
.ts-dropdown {
    z-index: 10050 !important;
    position: absolute !important;
}

/* Quando o dropdown estiver aberto, garantir visibilidade */
.ts-dropdown.open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ajuste específico para Collapse (que pode estar cortando) */
.collapse:has(.ts-wrapper),
.collapse-content:has(.ts-wrapper),
[class*="collapse"]:has(.ts-wrapper) {
    overflow: visible !important;
}

/* Modal do MoonShine - z-index ainda maior */
.modal .ts-wrapper .ts-dropdown,
.modal-mask .ts-wrapper .ts-dropdown,
div[role="dialog"] .ts-wrapper .ts-dropdown {
    z-index: 10050 !important;
}

/* Células da tabela com dropdowns */
td .ts-wrapper {
    min-width: 180px;
}

/* Garantir que o dropdown tenha altura adequada */
.ts-dropdown-content {
    max-height: 300px !important;
    overflow-y: auto !important;
}

/* Ajuste para o container do filtro */
.custom-form-field.ts-wrapper {
    z-index: 10;
}

/* 🔧 Fallback: força qualquer elemento com posição absoluta/relativa */
.ts-dropdown {
    z-index: 10050 !important;
    pointer-events: auto !important;
}

/* Container do formulário de pesquisa */
form .ts-wrapper .ts-dropdown {
    z-index: 10050 !important;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
}

.ts-dropdown {
    min-width: 260px !important;
}


.duplicated-item {
    color: rgb(241, 60, 60);
    /* Ou qualquer cor que você queira */
    font-weight: bold;
}

.bg-laranja {
    background-color: rgba(236, 127, 84, 0.89) !important;
    opacity: 5;
    --tw-text-opacity: 1;
    color: rgb(225 77 14 / var(--tw-text-opacity))
}

.bg-Aprovar {
    background-color: rgba(57, 187, 248, 0.753);
    --tw-text-opacity: 1;
    color: rgba(var(--success-text), var(--tw-text-opacity))
}

.bg-Assinar {
    background-color: rgba(83, 190, 69, 0.781);
    --tw-text-opacity: 1;
    color: rgba(var(--success-text), var(--tw-text-opacity))
}


.menuText {
    color: rgb(138, 138, 138) !important;
    background-color: rgb(255, 255, 255);
    border-radius: .5rem !important;
}

.custom-form-field {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    /* Impede a quebra de texto */
    overflow: hidden;
    /* Esconde o texto que ultrapassa */
    text-overflow: ellipsis;
    /* Adiciona "..." ao texto que não cabe */
    font-size: 14px;
    /* Tamanho da fonte padrão */
    padding: 6px;
    /* Reduz o padding para ficar mais compacto */
    border: 1px solid #ccc;
    /* Adiciona borda para melhorar a visualização */
    border-radius: 4px;
    /* Adiciona bordas arredondadas */
    margin-bottom: 8px;
    /* Reduz a margem inferior */
}

.menu-profile {
    /* background-color: #ffffff !important;
    border-radius: 0.5rem !important; */
    /* border: none !important; */
    /* remove qualquer borda */
    box-shadow: none !important;
    /* remove sombra se houver */
    margin: 0 !important;
}

.email {
    color: #000000 !important;
}

.name {
    color: #000000 !important;
}

.menu-inner-button {
    background-color: #ffffff !important;
    border-radius: 0.5rem !important;
    color: #000000 !important;

}

/* Se quiser o hover um pouco mais claro */
.menu-inner-button:hover {
    background-color: #6e6e6e !important;
}



.custom-form-field-small {
    flex: 0 1 60px;
    min-width: 60px;
    max-width: 80px;
    /* Tamanho máximo */
    padding: 4px;
    margin-bottom: 0;
}

.custom-form-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* Reduz o espaçamento entre os campos */
    align-items: center;
    /* Alinha os itens verticalmente */
}

.custom-form-container>* {
    flex: 1 1 calc(25% - 8px);
    /* Ajusta o tamanho dos campos */
    min-width: 200px;
    /* Define um tamanho mínimo para os campos */
    max-width: 100%;
    /* Impede que os campos cresçam além do contêiner */
}

.antialiased {
    background: linear-gradient(
        135deg,
        #eef5f2 0%,
        #d9ebe3 20%,
        #b9d9cb 45%,
        #b9d9cb 70%,
        #b9d9cb 100%
    ) !important;

    min-height: 100vh;
}

.text-current,
.fill-current {
    background-color: transparent;
    /* color: rgb(212, 206, 206) !important; */

}

.menuText svg {
    color: #2B2B2B !important;
    fill: #000000 !important;
}

.menu-inner-item:hover {
    background-color: #c4c2bf !important;
    border-radius: 0.5rem !important;

    .text-current,
    .fill-current,
    span {
        color: rgb(0, 0, 0) !important;
    }
}

.btn .detail-button {
    background-color: transparent;
    color: rgb(255, 255, 255) !important;

}

.menu-heading {
    border-radius: 0.5rem !important;
}

.table-row {
    background-color: #7a7873 !important;
    /* sem 'ff' no final */
}

.menu-profile-exit {
    background-color: transparent;
    color: black !important;

    &:hover {
        color: rgb(236, 1, 1) !important;
        transform: scale(1.5);
    }
}

.text-primary {
    color: var(--primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #000000;
}

a,
p,
span,
td,
th {
    color: rgb(0, 0, 0);
}


@media (max-width: 768px) {
    .custom-form-container {
        flex-direction: column;
        /* Altera para coluna em telas pequenas */
    }

    .custom-form-container>* {
        flex: 1 1 100%;
        /* Faz com que os campos ocupem 100% da largura */
        min-width: 100%;
        /* Garante que os campos ocupem toda a largura */
    }

    .custom-form-field {
        font-size: 12px;
        /* Reduz o tamanho da fonte para telas menores */
    }

    .custom-form-field-small {
        min-width: 100%;
        /* Ocupa toda a largura em telas pequenas */
        max-width: 100%;
    }

    /* Forçar fundo verde no body */
    body {
        background-color: #15693A !important;
    }

    /* Se a tela de login estiver aplicando classes específicas */
    body.login-page,
    .moonshine-login {
        background-color: #15693A !important;
    }

    /* Caixa de login opcional */
    .moonshine-login .bg-white {
        background-color: #ffffff;
        color: #000000;
    }

}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM MICRO-ANIMATIONS & VISUAL EFFECTS
   ═══════════════════════════════════════════════════════════════ */

/* Badge pulse animation */
@keyframes badgePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* Smooth focus glow for inputs */
input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 3px rgba(51, 166, 91, 0.28) !important;
    border-color: #33A65B !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    outline: none;
}

/* Card hover lift effect */
.card,
.box,
[class*='decoration-block'] {
    transition: transform 0.35s cubic-bezier(.22, 1, .36, 1), box-shadow 0.35s cubic-bezier(.22, 1, .36, 1) !important;
}

.card:hover,
.box:hover,
[class*='decoration-block']:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
}

/* Table row smooth hover */
table tbody tr {
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

table tbody tr:hover {
    background-color: #eef8f1 !important;
    box-shadow: 0 2px 12px rgba(51, 166, 91, 0.12);
}

/* Sidebar menu item smooth transitions */
.menu-inner-item {
    transition: all 0.3s cubic-bezier(.22, 1, .36, 1) !important;
    border-radius: 8px !important;
    position: relative;
    overflow: hidden;
}

/* Ripple-like effect on menu items */
.menu-inner-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(51, 166, 91, 0.12), transparent);
    transition: left 0.5s ease;
}

.menu-inner-item:hover::before {
    left: 100%;
}

/* Collapse smooth open/close */
.collapse {
    transition: all 0.4s cubic-bezier(.22, 1, .36, 1) !important;
}

/* Action buttons */
.btn,
button[class*='btn'] {
    transition: all 0.3s cubic-bezier(.22, 1, .36, 1) !important;
    position: relative;
    overflow: hidden;
}

.btn:active,
button[class*='btn']:active {
    transform: scale(0.97) !important;
}

/* Modal backdrop smooth */
.modal-bg {
    transition: opacity 0.3s ease !important;
}

/* Breadcrumb links */
.breadcrumbs a {
    transition: color 0.2s ease;
}

.breadcrumbs a:hover {
    color: #15693A !important;
}

/* Notification bell wiggle on hover */
.notifications-button:hover svg {
    animation: bellShake 0.5s ease;
}

@keyframes bellShake {

    0%,
    100% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(10deg);
    }

    50% {
        transform: rotate(-8deg);
    }

    75% {
        transform: rotate(5deg);
    }
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #33A65B, #15693A);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #15693A, #0f4f2c);
}

/* Page loading shimmer for async content */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.loading-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

/* Floating labels on select/input hover */
.moonshine-field label {
    transition: color 0.2s ease, transform 0.2s ease;
}

.moonshine-field:hover label {
    color: #15693A;
}

/* Table header sticky effect enhancement */
table thead th {
    backdrop-filter: blur(8px);
    transition: background-color 0.3s ease;
}

/* Smooth skeleton loading for images */
img {
    transition: opacity 0.3s ease;
}

/* Selection highlight color */
::selection {
    background: rgba(51, 166, 91, 0.35);
    color: #1e293b;
}