/* Importa a fonte Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

.hidden {
    display: none !important;
}

/* Estilos da Sidebar */
.tab-button.active {
    background-color: #eff6ff; /* Azul muito claro */
    color: #2563eb; /* Azul escuro */
    font-weight: 600;
}

.tab-button:hover {
    background-color: #f3f4f6; /* Cinza claro */
}


/* Estilos do card de reagentes (ATUALIZADO PARA ACORDEÃO) */
.reagent-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.25rem; /* Reduzido de 1.5rem */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}

.reagent-card.out-of-stock {
    /* A opacidade será controlada pelo header */
}

.reagent-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Centralizado verticalmente */
    /* ATUALIZADO: removido margin-bottom para um look mais clean antes de expandir */
    cursor: pointer; /* Adicionado cursor */
}

.reagent-card-header h3 {
    margin: 0;
    font-size: 1.125rem; /* Reduzido de 1.25rem */
    font-weight: 600;
    /* Removido max-width para ocupar o espaço */
    flex: 1; /* Ocupa o espaço disponível */
    margin-right: 1rem; /* Espaço para o status e seta */
    white-space: normal; /* Permite quebra de linha se o nome for muito longo */
    word-break: break-word; /* Quebra palavras longas */
}

/* Ícone da Seta (Chevron) */
.reagent-card-header .chevron-icon {
    transition: transform 0.3s ease;
    flex-shrink: 0;
    color: #9ca3af; /* text-gray-400 */
}

.reagent-card.expanded .chevron-icon {
    transform: rotate(180deg);
}


.status-badge {
    padding: 0.25rem 0.75rem; /* Voltando ao tamanho original */
    border-radius: 999px;
    font-size: 0.75rem; /* Voltando ao tamanho original */
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 1rem; /* Adicionado espaço */
}

.status-available { background-color: #dcfce7; color: #166534; }
.status-low-stock { background-color: #fef3c7; color: #92400e; }
.status-out-of-stock { background-color: #fee2e2; color: #991b1b; }

/* Corpo e Rodapé Ocultos por Padrão (NOVO) */
.reagent-card-body,
.reagent-card-footer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, margin-top 0.3s ease-out, opacity 0.2s ease-out;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
}

/* Corpo e Rodapé Visíveis quando expandido (NOVO) */
.reagent-card.expanded .reagent-card-body {
    max-height: 500px; /* Altura suficiente */
    margin-top: 1rem; /* Adiciona espaço quando expandido */
    opacity: 1;
    visibility: visible;
}

.reagent-card.expanded .reagent-card-footer {
    max-height: 500px;
    margin-top: 1.5rem; /* Adiciona espaço quando expandido */
    opacity: 1;
    visibility: visible;
}


.reagent-card-body {
    flex-grow: 1;
    color: #475569;
    font-size: 0.9rem; /* Voltando ao tamanho original */
    padding-top: 1rem; /* Adicionado padding */
    border-top: 1px solid #f3f4f6; /* Adiciona um divisor */
}

.reagent-card-footer {
    margin-top: 0; /* Ajustado */
}

/* Botões (ATUALIZADO) */
.btn {
    font-weight: 600;
    padding: 0.75rem 1.5rem; /* Voltando ao tamanho original */
    border-radius: 0.5rem;
    font-size: 0.875rem; /* Voltando ao tamanho original */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: none;
}
.btn-primary:disabled {
    background-color: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
}

/* Modais */
.modal-overlay {
    position: fixed; inset: 0; background-color: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem; z-index: 100;
}
.modal-content {
    background-color: #ffffff; padding: 2rem; border-radius: 1rem;
    width: 100%; max-width: 500px;
}
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #e2e8f0; padding-bottom: 1rem; margin-bottom: 1rem;
}
.close-button { background: none; border: none; font-size: 2rem; cursor: pointer; color: #94a3b8; }
.modal-footer { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1.5rem; }
.modal-footer .btn { width: auto; }

/* Itens do Carrinho */
#cart-items-list { max-height: 50vh; overflow-y: auto; }
.cart-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 0; border-bottom: 1px solid #e2e8f0;
}
.remove-cart-item-btn {
    background-color: #fee2e2; color: #ef4444; border: none;
    border-radius: 50%; width: 32px; height: 32px; cursor: pointer;
}

/* Minhas Solicitações */
.my-request-card {
    background-color: white;
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.request-status {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}
.status-pending { background-color: #fffbeb; color: #b45309; }
.status-completed { background-color: #f0fdf4; color: #15803d; }

/* Animação de Pulso */
@keyframes pulse {
  70% { transform: scale(1.05); }
}
.btn.pulsing { animation: pulse 1.5s 1; }

/* Notificação */
.notification-popup {
    position: fixed; top: 20px; right: 20px; padding: 1rem 1.5rem;
    border-radius: 0.75rem; color: white; font-weight: 600;
    z-index: 10000; opacity: 0; transform: translateY(-20px);
    animation: fadeInOut 3s forwards;
}
.notification-popup.success { background-color: #16a34a; }
.notification-popup.error { background-color: #dc2626; }
@keyframes fadeInOut {
    10% { opacity: 1; transform: translateY(0); }
    90% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
}

/* Estilo para Upload de Arquivo */
.file-upload-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
    background-color: #f9fafb;
    color: #6b7280;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.file-upload-label:hover {
    border-color: #3b82f6;
    background-color: #eff6ff;
    color: #2563eb;
}
.file-upload-label .file-name {
    font-weight: 400;
    font-style: italic;
    color: #4b5563;
}
.file-upload-label.file-selected {
    border-color: #2563eb;
    background-color: #eff6ff;
}
.file-upload-label.file-selected .file-name {
    font-style: normal;
    font-weight: 600;
    color: #1e3a8a;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Estilos para cards de solicitação de compra */
.purchase-request-card {
    background-color: white;
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
}

.purchase-status {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

.status-em-analise { background-color: #fef3c7; color: #92400e; }
.status-em-compra { background-color: #dbeafe; color: #1e40af; }
.status-finalizado { background-color: #dcfce7; color: #166534; }
.status-recusado { background-color: #fee2e2; color: #991b1b; }

/* CORREÇÃO: Estilização para os campos de formulário dentro do modal de solicitação de compra */
#purchase-request-modal textarea {
    border: 1px solid #d1d5db !important; /* Cor da borda cinza claro */
    background-color: #f9fafb !important; /* Fundo cinza muito claro */
    padding: 0.75rem;
    border-radius: 0.5rem;
    width: 100%;
    transition: all 0.2s ease-in-out;
    margin-top: 0.25rem;
    box-shadow: none !important; /* Remove a sombra padrão para um look mais limpo */
}

#purchase-request-modal textarea:focus {
    outline: none;
    border-color: #3b82f6 !important; /* Borda azul ao focar */
    background-color: #ffffff !important; /* Fundo branco ao focar */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important; /* Sombra de anel azul suave */
}

/* Melhora a performance de rolagem em dispositivos móveis */
main, .modal-body-scrollable, .modal-content, #cart-items-list {
    -webkit-overflow-scrolling: touch;
}

/* Previne que a rolagem da sidebar afete a página principal */
aside#sidebar {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}