:root {
  --bora-purple: #3d0057;
  --bora-dark: #1a0026;
  --bora-yellow: #facc15;
}

body { 
  font-family: 'Plus Jakarta Sans', sans-serif; 
}

/* === SCROLLBAR === */
.custom-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); }
.custom-scroll::-webkit-scrollbar-thumb { background: rgba(250, 204, 21, 0.2); border-radius: 10px; }

/* === FORMULÁRIOS GLOBAIS === */
.form-input { 
  width: 100%; 
  background: rgba(255, 255, 255, 0.05); 
  border: 1px solid rgba(255, 255, 255, 0.1); 
  color: white; 
  padding: 0.8rem 1rem; 
  border-radius: 0.75rem; 
  outline: none; 
  font-size: 0.875rem; 
  transition: all 0.3s;
}

.form-input:focus { 
  border-color: var(--bora-yellow); 
  background: rgba(255, 255, 255, 0.1); 
}

/* === CORREÇÃO DE AUTOFILL DO NAVEGADOR === */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover, 
.form-input:-webkit-autofill:focus, 
.form-input:-webkit-autofill:active,
.modal-input:-webkit-autofill,
.modal-input:-webkit-autofill:focus {
  transition: background-color 5000s ease-in-out 0s !important;
  -webkit-text-fill-color: white !important;
}

.form-input:disabled { 
  opacity: 0.5; 
  cursor: not-allowed; 
}

select.form-input option {
  background-color: var(--bora-dark);
  color: white;
}

.modal-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  padding: 0.8rem 1rem;
  border-radius: 0.75rem;
  outline: none;
  font-size: 0.875rem;
  transition: all 0.3s;
}
.modal-input:focus { border-color: var(--bora-yellow); background: rgba(255, 255, 255, 0.1); }

.form-label { 
  font-size: 10px; font-weight: 800; text-transform: uppercase; 
  color: rgba(250, 204, 21, 0.8); /* Equivalente a --bora-yellow com 80% de opacidade */
  margin-bottom: 0.35rem; display: block; letter-spacing: 0.05em; 
}

.modal-label { 
  font-size: 10px; 
  font-weight: 800; 
  text-transform: uppercase; 
  color: var(--bora-yellow); 
  margin-bottom: 0.5rem; 
  display: block; 
  letter-spacing: 0.1em;
}

/* === CHECKBOXES === */
/* Checkbox Padrão (Login) */
.custom-checkbox { 
  width: 1.25rem; 
  height: 1.25rem; 
  border: 2px solid rgba(255,255,255,0.2); 
  border-radius: 0.3rem; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  transition: all 0.2s; 
  cursor: pointer; 
  background: rgba(255,255,255,0.05); 
}
.custom-checkbox.checked { 
  background-color: var(--bora-yellow); 
  border-color: var(--bora-yellow); 
}
.custom-checkbox i { 
  color: var(--bora-purple); 
  opacity: 0; 
  transition: opacity 0.2s; 
  width: 14px; height: 14px; 
}
.custom-checkbox.checked i { opacity: 1; }

/* Checkbox de Filtro (Dashboard) */
.filter-checkbox { 
  width: 1.2rem; height: 1.2rem; border: 2px solid rgba(255,255,255,0.2); border-radius: 0.3rem; 
  display: flex; align-items: center; justify-content: center; 
  transition: all 0.2s; cursor: pointer; 
}
.filter-checkbox.checked { background-color: var(--bora-yellow); border-color: var(--bora-yellow); }
.filter-checkbox svg { color: var(--bora-dark); opacity: 0; transition: opacity 0.2s; width: 12px; height: 12px; }
.filter-checkbox.checked svg { opacity: 1; }

/* Checkbox de Atuação (Perfil) */
.role-checkbox {
  width: 1.5rem; height: 1.5rem; border: 2px solid rgba(255,255,255,0.3); border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s;
}

/* === CORES DE EVENTOS (Dashboard, Banda) === */
.bg-evento-aula { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.2); }
.text-evento-aula { color: #34d399; }
.bg-evento-show { background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.2); }
.text-evento-show { color: #60a5fa; }
.bg-evento-pessoal { background: rgba(234, 179, 8, 0.15); border: 1px solid rgba(234, 179, 8, 0.2); }
.text-evento-pessoal { color: var(--bora-yellow); }
.bg-evento-logistica { background: rgba(148, 163, 184, 0.15); border: 1px solid rgba(148, 163, 184, 0.2); }
.text-evento-logistica { color: #94a3b8; }
.bg-evento-ensaio { background: rgba(168, 85, 247, 0.15); border: 1px solid rgba(168, 85, 247, 0.2); }
.text-evento-ensaio { color: #c084fc; }

/* === COMPONENTES DE PÁGINA === */
/* Dashboard */
.proximo-evento { border-color: rgba(250, 204, 21, 0.5) !important; box-shadow: 0 0 20px rgba(250, 204, 21, 0.05); }
button.fixed.bottom-6.right-6.md\:hidden { display: none !important; }

/* Gaveta de Detalhes (Drawer) */
#event-drawer { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.drawer-open #event-drawer { transform: translateX(0); }
.drawer-closed #event-drawer { transform: translateX(100%); }

/* Perfil */
.role-card-active { background-color: rgba(250, 204, 21, 0.1) !important; border-color: var(--bora-yellow) !important; }
.role-card-active .role-checkbox { background-color: var(--bora-yellow); border-color: var(--bora-yellow); }
.role-card-active .role-icon { color: var(--bora-yellow) !important; }

/* Meus Projetos */
.type-card { border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: all 0.3s; background: rgba(255,255,255,0.02); }
.type-card:hover { background: rgba(255,255,255,0.05); }
.type-card.active { border-color: var(--bora-yellow); background: rgba(250, 204, 21, 0.1); }
.type-card.active i { color: var(--bora-yellow); }
.pin-btn.pinned { color: var(--bora-yellow) !important; opacity: 1 !important; }
.project-row { transition: all 0.2s; border-bottom: 1px solid rgba(255,255,255,0.05); }
.project-row:hover { background: rgba(255,255,255,0.03); }
.project-row:last-child { border-bottom: none; }

/* Banda & Evento (Abas) */
.band-tab { border-bottom: 2px solid transparent; transition: all 0.3s; }
.band-tab.active { border-color: var(--bora-yellow); color: var(--bora-yellow); }
.modal-tab-btn { border-bottom: 2px solid transparent; opacity: 0.4; transition: all 0.3s; }
.modal-tab-btn.active { border-color: var(--bora-yellow); opacity: 1; color: var(--bora-yellow); }
.tab-btn { border-bottom: 2px solid transparent; transition: all 0.3s; opacity: 0.4; padding-bottom: 1rem; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; }
.tab-btn.active { border-color: var(--bora-yellow); opacity: 1; color: var(--bora-yellow); }

/* Banda & Evento (Componentes) */
.logistics-row { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); padding: 1rem; border-radius: 1rem; margin-bottom: 0.75rem; }
.glass-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 2rem; padding: 1.5rem; }
.row-item { background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 1rem; padding: 1rem; margin-bottom: 0.75rem; }