/* ========================================= */
/* GERENCIADOR.CSS - HIERARQUIA DE Z-INDEX   */
/* ========================================= */

/* Base */
header {
    z-index: 40;
}

/* Nível 1: Modais Principais (Produto, Categoria, Config) */
#product-modal,
#category-modal,
#modal-upgrade,
#modal-recuperacao {
    z-index: 50;
}

/* Nível 2: Modais Secundários (Abrem por cima dos principais) */
#modal-importar-addon,
#modal-itens-grupo,
#modal-global-addon {
    z-index: 60;
}

/* Nível 3: Ferramentas e Alertas (Cropper, Confirmação, Toast) */
#modal-imagem-cropper {
    z-index: 70;
}

#modal-confirmacao {
    z-index: 80;
}

.toast-notification {
    z-index: 90;
}

/* Vamos usar classe para o Toast */

/* --- 1. Animações Suaves (Modais e Alerts) --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-fade-in {
    animation: fadeIn 0.2s ease-out forwards;
}

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

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

.slide-in-right {
    animation: slideInRight 0.3s ease-out forwards;
}

/* --- 2. Scrollbar Personalizada (Fica muito mais Pro) --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f3f4f6;
    /* gray-100 */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    /* gray-300 */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
    /* gray-400 */
}

/* --- 3. Utilitários de Drag & Drop (Sortable) --- */
.sortable-ghost {
    opacity: 0.4;
    background-color: #f3f4f6;
    border: 2px dashed #d1d5db;
}

.drag-handle,
.drag-handle-prod,
.drag-handle-cat {
    cursor: grab;
}

.drag-handle:active,
.drag-handle-prod:active,
.drag-handle-cat:active {
    cursor: grabbing;
}

/* --- 4. Inputs e Elementos de Formulário --- */
/* Remove o estilo padrão feio do input color */
input[type="color"] {
    -webkit-appearance: none;
    border: none;
    padding: 0;
    overflow: hidden;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 0.375rem;
    /* rounded-md */
    border: 1px solid #e5e7eb;
}

/* Transição suave para todos os inputs e botões */
input,
select,
textarea,
button,
.cursor-pointer {
    transition: all 0.2s ease-in-out;
}

/* --- 5. Efeitos de Bloqueio (Premium) --- */
/* Estilo para campos readonly/disabled para ficarem claros que estão travados */
input[readonly],
input[disabled],
select[disabled] {
    background-color: #f9fafb;
    /* gray-50 */
    color: #9ca3af;
    /* gray-400 */
    cursor: not-allowed;
    border-color: #e5e7eb;
}

/* Efeito de foco no cartão de Modo de Operação */
.border-primary {
    border-color: #6A0DAD !important;
    /* Garante o roxo quando selecionado */
}

/* --- 6. FOCUS ULTRA VIOLETA (O "Pulo do Gato") --- */
/* Burlar o navegador e forçar o brilho roxo/lilás */
input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: #8B5CF6 !important;
    /* Roxo mais vivo */
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15) !important;
    /* Sombra lilás suave */
    transition: all 0.2s ease-in-out;
}

/* --- 7. ESTILOS DOS HORÁRIOS (NOVO) --- */
.horario-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    transition: all 0.2s;
}

.horario-row:hover {
    border-color: #d8b4fe;
}

.badge-fechado {
    color: #9ca3af;
    background: #f3f4f6;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    border: 1px dashed #d1d5db;
    flex-grow: 1;
}

/* ========================================= */
/* CORREÇÃO DAS CORES (PICKR)                */
/* ========================================= */

/* Força o botão gerado pelo JS a ser redondo */
.pickr .pcr-button {
    border-radius: 50% !important;
    /* Círculo perfeito */
    width: 3.5rem !important;
    /* Igual a w-14 (56px) */
    height: 3.5rem !important;
    /* Igual a h-14 (56px) */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    /* Sombra */
    border: 2px solid #ffffff !important;
    /* Borda branca bonita */
    outline: 2px solid #e5e7eb !important;
    /* Anel externo cinza */
}

/* Garante que o preview interno também seja redondo */
.pickr .pcr-button::before,
.pickr .pcr-button::after {
    border-radius: 50% !important;
}

/* ========================================= */
/* BOTÕES DE SALVAR - ESTADOS               */
/* ========================================= */

/* Estado DESABILITADO (padrão) - Verde claro/apagado */
#btn-salvar-horarios:disabled,
#btn-salvar-alteracoes-gerais:disabled,
#btn-salvar-bairros:disabled,
#btn-salvar-categorias-lista:disabled,
#btn-salvar-produtos-lista:disabled {
    background-color: #97DE92 !important;
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}

/* Estado HABILITADO - Verde vivo */
#btn-salvar-horarios:not(:disabled),
#btn-salvar-alteracoes-gerais:not(:disabled),
#btn-salvar-bairros:not(:disabled),
#btn-salvar-categorias-lista:not(:disabled),
#btn-salvar-produtos-lista:not(:disabled) {
    background-color: #22c55e !important;
    opacity: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    transform: scale(1);
    transition: all 0.2s ease !important;
}

/* Hover quando habilitado */
#btn-salvar-horarios:not(:disabled):hover,
#btn-salvar-alteracoes-gerais:not(:disabled):hover,
#btn-salvar-bairros:not(:disabled):hover,
#btn-salvar-categorias-lista:not(:disabled):hover,
#btn-salvar-produtos-lista:not(:disabled):hover {
    background-color: #16a34a !important;
    transform: scale(1.02);
}

/* ========================================= */
/* SOLICITAR FERRAMENTAS (TEMPORÁRIO)        */
/* TODO: Remover quando GATEWAY_ATIVO = true */
/* ========================================= */

/* Checkbox de seleção de ferramenta */
.solicitar-ferramenta-cb {
    accent-color: #22c55e;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.solicitar-ferramenta-cb:hover {
    transform: scale(1.15);
}

.solicitar-ferramenta-cb:checked {
    animation: checkPulse 0.3s ease;
}

@keyframes checkPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

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

/* Footer flutuante */
#footer-solicitar-ferramentas {
    animation: slideUpFooter 0.3s ease-out;
}

@keyframes slideUpFooter {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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