/* --- client/styles.css --- */

/* Ajustes gerais do App */
#appContainer { width: 700vw !important; height: 100%; }
#loginScreen, #panelScreen, #orderScreen, #managerScreen { display: none !important; }
.header-bar { display: none !important; }

/* Telas do Cliente */
#clientOrderScreen, #clientPaymentScreen { 
    padding: 1rem; 
    display: flex; 
    flex-direction: column; 
    overflow-y: auto; 
    overflow-x: hidden; 
}
@media (min-width: 768px) { #clientOrderScreen, #clientPaymentScreen { padding: 1.5rem; } }
@media (min-width: 1024px) { #clientOrderScreen, #clientPaymentScreen { padding: 2rem; } }

/* Scrollbars */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #1f2937; border-radius: 10px;}
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #4b5563; border-radius: 10px; border: 1px solid #1f2937;}

/* Switch de Observação */
.switch-obs { position: relative; display: inline-block; width: 50px; height: 28px; }
.switch-obs input { opacity: 0; width: 0; height: 0; }
.slider-obs { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4b5563; transition: .4s; border-radius: 34px; }
.slider-obs:before { background-color: white; height: 20px; width: 20px; left: 4px; bottom: 4px; border-radius: 50%; position: absolute; content: ""; transition: .4s;}
input:checked + .slider-obs { background-color: #fbbf24; }
input:checked + .slider-obs:before { transform: translateX(22px); }

/* Abas CRM */
.crm-tab-btn { padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 600; color: #9ca3af; border-bottom: 2px solid transparent; transition: all 0.2s; }
.crm-tab-btn:hover { color: #d1d5db; }
.crm-tab-btn.active { color: #ff7518; border-bottom-color: #ff7518; }
.crm-tab-content { display: none; padding: 1rem; background-color: #111827; border-radius: 0 0 0.5rem 0.5rem; }
.crm-tab-content.active { display: block; }
.crm-tabs-container::-webkit-scrollbar { display: none; }
.crm-tabs-container { -ms-overflow-style: none; scrollbar-width: none; }

/* Abas do Modal de Associação */
.assoc-tab-btn { flex: 1; padding: 10px; text-align: center; color: #6b7280; border-bottom: 2px solid #374151; cursor: pointer; font-weight: 600; transition: all 0.3s; }
.assoc-tab-btn.active { color: #ff7518; border-bottom-color: #ff7518; }
.assoc-tab-content { animation: fadeIn 0.3s ease-in-out; }

#appleLoginBtn i {
    margin-bottom: 2px; /* Ajuste fino para alinhar o ícone da maçã com o texto */
}

/* Deixar o botão de Enviar Pedido com um brilho sutil para destaque */
#activateAndSendBtn {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- CORREÇÃO DOS INPUTS INVISÍVEIS --- */
/* Forçar a visibilidade dos inputs que o Tailwind "reseta" */
.input-pdv {
    display: block !important;
    width: 100% !important;
    background-color: #1f2937 !important; /* fundo cinza escuro */
    border: 2px solid #4b5563 !important; /* borda cinza clara bem visível */
    color: #ffffff !important; /* texto branco */
    padding: 12px !important;
    border-radius: 8px !important;
    margin-top: 4px !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-sizing: border-box !important;
}

/* Quando o usuário clica no campo */
.input-pdv:focus {
    border-color: #ff7518 !important; /* borda laranja */
    outline: none !important;
}

/* Garantir que as abas escondidas não ocupem espaço, mas as ativas apareçam */
.assoc-tab-content.hidden {
    display: none !important;
}
.assoc-tab-content.block {
    display: block !important;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- FILTROS DE GRUPO/SUBGRUPO (CHIPS) --- */
.filter-chip {
    white-space: nowrap;
    padding: 6px 14px;
    border-radius: 999px; /* Formato Pill */
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    background-color: #1f2937; /* Cinza escuro */
    border: 1px solid #374151;
    color: #9ca3af; /* Texto cinza claro */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.filter-chip:hover {
    background-color: #374151;
    color: #f3f4f6;
    border-color: #4b5563;
}

.filter-chip.active {
    background-color: #d35400; /* Cor Pumpkin */
    border-color: #e67e22;
    color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(211, 84, 0, 0.3);
}

.filter-chip.back-btn {
    background-color: rgba(153, 27, 27, 0.2); /* Vermelho bem suave */
    border-color: rgba(153, 27, 27, 0.5);
    color: #fca5a5;
}

.filter-chip.back-btn:hover {
    background-color: rgba(153, 27, 27, 0.4);
}

/* Animação de entrada */
#filterContainer.hidden {
    display: none;
    opacity: 0;
    transform: translateY(-5px);
}