/* --- VARIÁVEIS GLOBAIS --- */
:root {
    --primary: #4f075f;
    --accent: #00f5d4;
    --sidebar-width: 260px;
    
    /* MÁGICA DO IPHONE: Calcula o espaço do "Notch" (câmera frontal) e da barra de baixo */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* --- CONFIGURAÇÕES DE LAYOUT (Otimizado para PWA/Mobile) --- */
html, body {
    height: 100dvh; 
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* O corpo não rola, previne o efeito "elástico" da página inteira no iOS */
    position: fixed;
    background-color: #f9fafb;
    -webkit-font-smoothing: antialiased; 
}

/* --- ÁREA DO CONTEÚDO --- */
#content-area {
    /* Removido o height fixo, o Tailwind (flex-1) cuida disso agora perfeitamente */
    display: flex;
    flex-direction: column;
}

/* Remove a caixa de seleção azul nos toques do celular */
* {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; 
}

/* --- SCROLLBAR GLOBAL DISCRETA (Estilo Mac OS) --- */
/* Aplica-se a todo o sistema caso alguma barra precise aparecer */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(79, 7, 95, 0.15); /* Roxo super transparente */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(79, 7, 95, 0.4); /* Fica mais visível só se passar o rato */
}

/* --- UTILITÁRIO: BARRA INVISÍVEL (O Segredo da Elegância) --- */
/* Use a classe "no-scrollbar" no HTML sempre que quiser rolagem sem mostrar a barra */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* O MOTOR DE ROLAGEM ACELERADO POR HARDWARE (Limpo e sem travas de altura) */
.content-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Scroll fluido com inércia no iOS */
    transform: translateZ(0); 
    will-change: transform, scroll-position;
}

/* --- ESTILIZAÇÃO DA SIDEBAR & MENU TOPO --- */
#sidebar {
    background-color: var(--primary);
    padding-top: var(--safe-top); 
    padding-bottom: var(--safe-bottom);
}

.header-safe-area {
    padding-top: var(--safe-top) !important;
}

/* Efeito de Botão Ativo na Sidebar */
.sidebar-active {
    background: rgba(255, 255, 255, 0.1) !important;
    border-left: 4px solid var(--accent);
    color: var(--accent) !important;
}

.sidebar-active i {
    color: var(--accent) !important;
}

/* --- COMPONENTES DE FORMULÁRIO --- */
.custom-shadow {
    box-shadow: 0 10px 25px -5px rgba(79, 7, 95, 0.1);
}

.hidden-form {
    display: none;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 7, 95, 0.1);
}

/* Estados de Validação */
.is-valid {
    border-color: #10b981 !important;
    background-color: #ecfdf5 !important;
}

.is-invalid {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
}

/* --- ANIMAÇÕES --- */
.animate-fade-in {
    animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- COMPONENTES GLOBAIS --- */
#sidebar-overlay {
    display: none;
}
#sidebar-overlay.active {
    display: block;
}

/* Container do Loader */
#loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(79, 7, 95, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999999; /* Aumentado para cobrir tudo */
}

/* Spinner */
.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(0, 245, 212, 0.2);
    border-top: 4px solid var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* --- RESPONSIVIDADE --- */
@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
    .hide-pc { display: none !important; }
}